Commit 01958778 by Brian Talbot Committed by Andy Armstrong

certificates: reference NPM installed UXPL

* remove static UXPL + lib files from root
* updating edx-pattern-library npm version to 0.8.12
* resolving UXPL syntax/version changes
* syntax/spacing corrections
* correcting npm-based lib paths
* UXPL update - syncing up sass LTR/RTL compile
* UXPL update - font-size, line-heights, + colors
* UXPL update - breakpoint names
* UXPL update - removing unnecessary %reset-link reference
* customizing UXPL buttons for banner actions
parent 2d2913ef
...@@ -3,51 +3,21 @@ ...@@ -3,51 +3,21 @@
// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files. // About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
// ------------------------------
// #UTILITIES
// ------------------------------
@import '../../../../static/pattern-library/sass/utilities/functions';
@import '../../../../static/pattern-library/sass/utilities/variables';
@import '../../../../static/pattern-library/sass/utilities/mixins';
@import '../../../../static/pattern-library/sass/utilities/helpers';
@import 'utilities';
// ------------------------------ // ------------------------------
// #BASE // #CONFIG + LIB
// ------------------------------ // ------------------------------
@import '../../../../static/pattern-library/sass/base/normalize'; @import 'lib';
@import '../../../../static/pattern-library/sass/base/reset'; @import 'config';
@import '../../../../static/pattern-library/sass/base/typography'; @import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
@import 'base';
// ------------------------------ // ------------------------------
// #COMPONENTS // #EXTENSIONS
// ------------------------------ // ------------------------------
@import '../../../../static/pattern-library/sass/components/colors'; @import 'utilities';
@import '../../../../static/pattern-library/sass/components/buttons'; @import 'base';
@import '../../../../static/pattern-library/sass/components/headings';
@import '../../../../static/pattern-library/sass/components/copy';
@import 'components'; @import 'components';
// ------------------------------
// #LAYOUTS
// ------------------------------
@import 'layouts'; @import 'layouts';
// ------------------------------
// #VIEWS
// ------------------------------
@import 'views'; @import 'views';
// ------------------------------
// #CONTEXTS
// ------------------------------
@import 'print'; @import 'print';
// ------------------------------
// #SHAME
// ------------------------------
@import 'overrides'; @import 'overrides';
...@@ -82,9 +82,6 @@ ...@@ -82,9 +82,6 @@
.header-app { .header-app {
.logo {
@extend %reset-link;
}
} }
// ------------------------------ // ------------------------------
...@@ -116,9 +113,15 @@ ...@@ -116,9 +113,15 @@
.message-actions .action { .message-actions .action {
// STATE: hover, active, focus
&:hover, &:active, &:focus {
// customizations from UXPL
color: palette(grayscale-cool, x-dark);
}
.icon { .icon {
@include margin-right(spacing-horizontal(x-small)); @include margin-right(spacing-horizontal(x-small));
font-size: font-size(mid-large); font-size: font-size(large);
} }
// CASE: icon display only // CASE: icon display only
...@@ -464,7 +467,7 @@ ...@@ -464,7 +467,7 @@
} }
.accomplishment-main { .accomplishment-main {
background: transparentize($cert-base-color, 0.9); background: transparentize(palette(grayscale-cool, dark), 0.9);
} }
.accomplishment-rendering { .accomplishment-rendering {
...@@ -489,7 +492,7 @@ ...@@ -489,7 +492,7 @@
} }
.accomplishment-main { .accomplishment-main {
background: transparentize($cert-distinguished-color, 0.9); background: transparentize(palette(primary, accent), 0.9);
} }
.accomplishment-rendering { .accomplishment-rendering {
......
// ------------------------------
// Open edX Certificates: Config
// About: variable and configuration overrides
// #VARIABLES
// ------------------------------
// #VARIABLES
// ------------------------------
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
$cert-distinguished-color: palette(primary, accent);
$cert-decorative-color: palette(grayscale-cool, light);
$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
// typography: config
@include font-face(
'Domine',
'../../certificates/fonts/Domine/Domine-Regular-webfont',
400,
$file-formats: woff woff2 ttf
);
@include font-face(
'Domine',
'../../certificates/fonts/Domine/Domine-Bold-webfont',
700,
$file-formats: woff woff2 ttf
);
// typography: config - stacks
$font-family-serif: 'Domine', serif;
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
padding: 0 (gutter()*2); padding: 0 (gutter()*2);
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
padding: 0 gutter(); padding: 0 gutter();
} }
} }
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
.banner-user { .banner-user {
@include text-align(center); @include text-align(center);
@include susy-breakpoint($bp-large, $susy) { @include susy-breakpoint($bp-screen-lg, $susy) {
@include text-align(left); @include text-align(left);
} }
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
// CASE: icon display only // CASE: icon display only
&.icon-only { &.icon-only {
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
padding: spacing-vertical(x-small) spacing-horizontal(base); padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon { .icon {
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
} }
} }
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
.footer-app-copyright { .footer-app-copyright {
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 first); @include span(6 first);
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
.footer-app-nav { .footer-app-nav {
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 last); @include span(6 last);
} }
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
display: block; display: block;
margin-bottom: spacing-vertical(x-small); margin-bottom: spacing-vertical(x-small);
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-right(spacing-horizontal(base)); @include margin-right(spacing-horizontal(base));
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
.list-legal { .list-legal {
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include text-align(right); @include text-align(right);
} }
} }
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
.accomplishment-recipient { .accomplishment-recipient {
width: span(12); width: span(12);
@include susy-breakpoint($bp-large, $susy) { @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(10); width: span(10);
} }
} }
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
.accomplishment-statement-detail { .accomplishment-statement-detail {
width: span(12); width: span(12);
@include susy-breakpoint($bp-large, $susy) { @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(8); width: span(8);
} }
} }
...@@ -222,15 +222,15 @@ ...@@ -222,15 +222,15 @@
@include margin-right(0); @include margin-right(0);
} }
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
width: span(3); width: span(3);
} }
@include susy-breakpoint($bp-large, $susy) { @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(2); width: span(2);
} }
@include susy-breakpoint($bp-huge, $susy) { @include susy-breakpoint($bp-screen-xl, $susy) {
width: span(2); width: span(2);
} }
} }
...@@ -261,15 +261,15 @@ ...@@ -261,15 +261,15 @@
vertical-align: middle; vertical-align: middle;
width: span(12); width: span(12);
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
width: span(4); width: span(4);
} }
@include susy-breakpoint($bp-large, $susy) { @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(3); width: span(3);
} }
@include susy-breakpoint($bp-huge, $susy) { @include susy-breakpoint($bp-screen-xl, $susy) {
width: span(3); width: span(3);
} }
...@@ -300,7 +300,7 @@ ...@@ -300,7 +300,7 @@
padding-bottom: 0; padding-bottom: 0;
} }
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(4); @include gallery(4);
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
...@@ -318,7 +318,7 @@ ...@@ -318,7 +318,7 @@
.accomplishment-brief { .accomplishment-brief {
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6); @include gallery(6);
} }
...@@ -343,7 +343,7 @@ ...@@ -343,7 +343,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6); @include gallery(6);
margin-bottom: 0; margin-bottom: 0;
} }
......
// ------------------------------
// Open edX Certificates: Main Style Compile
// About: third party libraries and dependencies import
@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon';
@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy';
@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint';
// ------------------------------
// Open edX Certificates: Main Style Compile
// About: Sass partial for defining settings and utilities for LTR-centric layouts.
// #SETTINGS
// #LIB
// ----------------------------
// #SETTINGS
// ----------------------------
$layout-direction: ltr;
// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
$grid-direction-default: ltr;
$grid-direction-reversed: ltr;
// ----------------------------
// #LIB
// ----------------------------
@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr';
...@@ -134,8 +134,8 @@ ...@@ -134,8 +134,8 @@
} }
.hd-3 { .hd-3 {
font-size: font-size(mid-large); font-size: font-size(large);
line-height: line-height(mid-large); line-height: line-height(large);
} }
.hd-4 { .hd-4 {
...@@ -144,18 +144,18 @@ ...@@ -144,18 +144,18 @@
} }
.hd-5 { .hd-5 {
font-size: font-size(mid-small); font-size: font-size(small);
line-height: line-height(mid-small); line-height: line-height(small);
} }
.hd-6 { .hd-6 {
font-size: font-size(small); font-size: font-size(x-small);
line-height: line-height(small); line-height: line-height(x-small);
} }
.hd-7 { .hd-7 {
font-size: font-size(x-small); font-size: font-size(xx-small);
line-height: line-height(small); line-height: line-height(x-small);
} }
// copy // copy
......
// ------------------------------
// Open edX Certificates: Main Style Compile
// About: Sass partial for defining settings and utilities for LTR-centric layouts.
// #SETTINGS
// #LIB
// ----------------------------
// #SETTINGS
// ----------------------------
$layout-direction: rtl;
// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
$grid-direction-default: rtl;
$grid-direction-reversed: ltr;
// ----------------------------
// #LIB
// ----------------------------
@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl';
// ------------------------------ // ------------------------------
// // Open edX Certificates: Utilities // Open edX Certificates: Utilities
// About: configuration, functions, variables, mixins, and general helpers for rendering. // About: configuration, functions, variables, mixins, and general helpers for rendering.
// #VARIABLES
// #FUNCTIONS // #FUNCTIONS
// #MIXINS // #MIXINS
// #HELPERS // #HELPERS
// ------------------------------ // ------------------------------
// #VARIABLES
// ------------------------------
$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
$cert-distinguished-color: palette(primary, accent);
$cert-decorative-color: palette(grayscale-cool, light);
$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
// typography: config
@include font-face(
'Domine',
'../../certificates/fonts/Domine/Domine-Regular-webfont',
400,
$file-formats: woff woff2 ttf
);
@include font-face(
'Domine',
'../../certificates/fonts/Domine/Domine-Bold-webfont',
700,
$file-formats: woff woff2 ttf
);
// typography: config - stacks
$font-family-serif: 'Domine', serif;
// ------------------------------
// #FUNCTIONS // #FUNCTIONS
// ------------------------------ // ------------------------------
...@@ -50,16 +18,6 @@ $font-family-serif: 'Domine', serif; ...@@ -50,16 +18,6 @@ $font-family-serif: 'Domine', serif;
// ------------------------------ // ------------------------------
// #HELPERS // #HELPERS
// ------------------------------ // ------------------------------
// don't link style me, bro!
%reset-link {
border-bottom: none;
padding: 0;
&:hover, &:focus, &:active {
border-bottom: 0;
}
}
// visual dividers // visual dividers
%divider-1 { %divider-1 {
border-bottom-width: rem(4); border-bottom-width: rem(4);
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
// #BASE CERT // #BASE CERT
// ------------------------------ // ------------------------------
// ------------------------------ // ------------------------------
// #DISTINCTION CERT // #DISTINCTION CERT
// ------------------------------ // ------------------------------
...@@ -15,7 +16,6 @@ ...@@ -15,7 +16,6 @@
// ------------------------------ // ------------------------------
// #INVALID // #INVALID
// ------------------------------ // ------------------------------
.wrapper-content.status-invalid { .wrapper-content.status-invalid {
@extend %layout-wrapper; @extend %layout-wrapper;
...@@ -26,14 +26,14 @@ ...@@ -26,14 +26,14 @@
.content-main { .content-main {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(9 of 12 first); @include span(9 of 12 first);
} }
} }
.content-secondary { .content-secondary {
@include susy-breakpoint($bp-medium, $susy) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(3 of 12 last); @include span(3 of 12 last);
} }
} }
......
...@@ -5,20 +5,14 @@ ...@@ -5,20 +5,14 @@
// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references. // NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
// ------------------------------
// #VENDOR
// ------------------------------
@import '../../../../static/vendor/bourbon/bourbon';
@import '../../../../static/vendor/susy/susy';
@import '../../../../static/vendor/breakpoint/breakpoint';
@import '../../../../static/vendor/bi-app/bi-app-ltr'; // LTR support
// ------------------------------ // ------------------------------
// #UTILITIES // #CONFIG - layout direction
// ------------------------------ // ------------------------------
@import '../../../../static/pattern-library/sass/utilities/variables-ltr'; @import 'ltr'; // LTR-specifc settings and utilities
// ------------------------------ // ------------------------------
// #BUILD // #BUILD
// ------------------------------ // ------------------------------
@import 'build'; // shared compile/build order for both LTR and RTL UI @import 'build'; // shared compile/build order for both LTR and RTL UI
...@@ -5,20 +5,14 @@ ...@@ -5,20 +5,14 @@
// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references. // NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
// ------------------------------
// #VENDOR
// ------------------------------
@import '../../../../static/vendor/bourbon/bourbon';
@import '../../../../static/vendor/susy/susy';
@import '../../../../static/vendor/breakpoint/breakpoint';
@import '../../../../static/vendor/bi-app/bi-app-rtl'; // RTL support
// ------------------------------ // ------------------------------
// #UTILITIES // #CONFIG - layout direction
// ------------------------------ // ------------------------------
@import '../../../../static/pattern-library/sass/utilities/variables-rtl'; @import 'rtl'; // RTL-specifc settings and utilities
// ------------------------------ // ------------------------------
// #BUILD // #BUILD
// ------------------------------ // ------------------------------
@import 'build'; // shared compile/build order for both LTR and RTL UI @import 'build'; // shared compile/build order for both LTR and RTL UI
...@@ -46,7 +46,7 @@ from django.template.defaultfilters import escapejs ...@@ -46,7 +46,7 @@ from django.template.defaultfilters import escapejs
<div class="message-actions"> <div class="message-actions">
<h3 class="sr-only">${_("Print or share your certificate:")}</h3> <h3 class="sr-only">${_("Print or share your certificate:")}</h3>
% if facebook_share_enabled: % if facebook_share_enabled:
<button class="action action-share-facebook btn btn-overlay btn-small icon-only" id="action-share-facebook" <button class="action action-share-facebook btn-inverse btn-small icon-only" id="action-share-facebook"
onclick="FaceBook.share({ onclick="FaceBook.share({
share_text: '${facebook_share_text | escapejs}', share_text: '${facebook_share_text | escapejs}',
share_link: '${share_url}', share_link: '${share_url}',
...@@ -59,7 +59,7 @@ from django.template.defaultfilters import escapejs ...@@ -59,7 +59,7 @@ from django.template.defaultfilters import escapejs
%endif %endif
% if twitter_share_enabled: % if twitter_share_enabled:
<button data-tooltip="${_('Share on Twitter')}" <button data-tooltip="${_('Share on Twitter')}"
class="action action-share-twitter btn btn-overlay btn-small icon-only" class="action action-share-twitter btn-inverse btn-small icon-only"
title="${_('Share on Twitter')}" title="${_('Share on Twitter')}"
onclick="popupWindow('${twitter_url}', 'tweetWindow', 640, 480); return false;"> onclick="popupWindow('${twitter_url}', 'tweetWindow', 640, 480); return false;">
<i class="icon fa fa-twitter" aria-hidden="true"></i> <i class="icon fa fa-twitter" aria-hidden="true"></i>
...@@ -68,7 +68,7 @@ from django.template.defaultfilters import escapejs ...@@ -68,7 +68,7 @@ from django.template.defaultfilters import escapejs
%endif %endif
%if linked_in_url: %if linked_in_url:
<button class="action action-linkedin-profile btn btn-overlay btn-small icon-only" id="action-share-linkedin" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}"> <button class="action action-linkedin-profile btn-inverse btn-small icon-only" id="action-share-linkedin" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}">
<i class="icon fa fa-linkedin" aria-hidden="true"></i> <i class="icon fa fa-linkedin" aria-hidden="true"></i>
<span class="action-label">${_("Add to LinkedIn Profile")}</span> <span class="action-label">${_("Add to LinkedIn Profile")}</span>
</button> </button>
...@@ -81,7 +81,7 @@ from django.template.defaultfilters import escapejs ...@@ -81,7 +81,7 @@ from django.template.defaultfilters import escapejs
</button> </button>
%endif %endif
<button class="action action-print btn btn-overlay btn-small" id="action-print-view"> <button class="action action-print btn-inverse btn-small" id="action-print-view">
<i class="icon fa fa-print" aria-hidden="true"></i> <i class="icon fa fa-print" aria-hidden="true"></i>
${_("Print Certificate")} ${_("Print Certificate")}
</button> </button>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG webfont generated by Font Squirrel.
Copyright : Digitized data copyright 2011 Google Corporation
Foundry : Ascender Corporation
Foundry URL : httpwwwascendercorpcom
</metadata>
<defs>
<font id="OpenSansExtrabold" horiz-adv-x="1200" >
<font-face units-per-em="2048" ascent="1638" descent="-410" />
<missing-glyph horiz-adv-x="532" />
<glyph unicode=" " horiz-adv-x="532" />
<glyph unicode="&#x09;" horiz-adv-x="532" />
<glyph unicode="&#xa0;" horiz-adv-x="532" />
<glyph unicode="!" horiz-adv-x="594" d="M82 1462h432l-51 -946h-330zM86 166q0 91 54 141.5t157 50.5q102 0 154.5 -50.5t52.5 -141.5q0 -90 -54.5 -140.5t-152.5 -50.5q-99 0 -155 50.5t-56 140.5z" />
<glyph unicode="&#x22;" horiz-adv-x="1073" d="M121 1462h356l-41 -528h-274zM596 1462h356l-41 -528h-274z" />
<glyph unicode="#" horiz-adv-x="1356" d="M37 391v254h274l31 168h-238v260h287l72 389h268l-74 -389h166l72 389h268l-73 -389h229v-260h-277l-30 -168h243v-254h-290l-74 -391h-268l73 391h-168l-71 -391h-267l72 391h-225zM578 645h165l31 168h-166z" />
<glyph unicode="$" d="M80 1044q0 165 106 258t318 115v137h207v-135q199 -11 401 -98l-119 -285q-209 94 -377 94q-80 0 -112.5 -19.5t-32.5 -57.5q0 -33 23.5 -54.5t81.5 -48t161 -61.5q209 -74 300 -168.5t91 -243.5q0 -168 -106.5 -273t-310.5 -130v-193h-207v187q-219 10 -422 98v332 q116 -59 252 -98.5t239 -39.5q85 0 124.5 20.5t39.5 68.5q0 33 -28.5 56t-95 52t-179.5 70q-127 47 -205 105.5t-113.5 131t-35.5 180.5zM613 1462z" />
<glyph unicode="%" horiz-adv-x="1942" d="M37 1026q0 220 98 338.5t275 118.5q175 0 278 -123t103 -334q0 -220 -99 -340.5t-282 -120.5q-172 0 -272.5 124.5t-100.5 336.5zM338 1022q0 -115 19 -166t57 -51t56.5 50t18.5 167q0 115 -18.5 166t-56.5 51q-39 0 -57.5 -52t-18.5 -165zM412 0l811 1462h297 l-811 -1462h-297zM1149 444q0 220 98 338.5t275 118.5q175 0 278 -123t103 -334q0 -219 -99.5 -339.5t-281.5 -120.5q-172 0 -272.5 124.5t-100.5 335.5zM1450 440q0 -115 19 -166t57 -51q43 0 59.5 58.5t16.5 158.5t-16.5 158.5t-59.5 58.5q-39 0 -57.5 -52t-18.5 -165z " />
<glyph unicode="&#x26;" horiz-adv-x="1636" d="M72 406q0 262 272 401q-62 70 -96.5 148.5t-34.5 177.5q0 160 123.5 254t339.5 94q211 0 328.5 -93.5t117.5 -254.5q0 -111 -63.5 -205.5t-200.5 -177.5l199 -189q75 115 104 260h406q-30 -138 -94.5 -276.5t-145.5 -237.5l320 -307h-506l-99 102q-90 -57 -147.5 -78.5 t-129 -32.5t-163.5 -11q-158 0 -279.5 54t-186 151t-64.5 221zM475 434q0 -63 45 -103t119 -40q57 0 100 15t66 34l-248 252q-82 -61 -82 -158zM565 1120q0 -75 88 -155q57 32 87 76.5t30 91.5q0 49 -28.5 70.5t-71.5 21.5q-42 0 -73.5 -25t-31.5 -80z" />
<glyph unicode="'" horiz-adv-x="598" d="M121 1462h356l-41 -528h-274z" />
<glyph unicode="(" horiz-adv-x="735" d="M74 582q0 290 71 523t209 398h326q-126 -175 -194 -412t-68 -507q0 -261 66 -495.5t194 -412.5h-324q-137 158 -208.5 388t-71.5 518zM493 1485z" />
<glyph unicode=")" horiz-adv-x="735" d="M55 1503h326q139 -166 210 -402t71 -519t-71.5 -514.5t-209.5 -391.5h-324q126 172 193 408.5t67 499.5q0 265 -66 501.5t-196 417.5zM247 1485z" />
<glyph unicode="*" horiz-adv-x="1100" d="M45 1014l45 291l348 -101l-39 352h303l-38 -352l356 101l37 -295l-314 -21l207 -278l-260 -138l-143 283l-123 -281l-272 136l206 278z" />
<glyph unicode="+" horiz-adv-x="1159" d="M72 588v268h372v367h269v-367h372v-268h-372v-361h-269v361h-372z" />
<glyph unicode="," horiz-adv-x="633" d="M57 -285q29 138 58.5 309.5t40.5 274.5h342l14 -23q-97 -381 -176 -561h-279z" />
<glyph unicode="-" horiz-adv-x="651" d="M43 393v312h565v-312h-565z" />
<glyph unicode="." horiz-adv-x="592" d="M86 166q0 92 54.5 142t158.5 50q99 0 152 -50t53 -142q0 -90 -54.5 -140.5t-150.5 -50.5q-99 0 -156 50t-57 141z" />
<glyph unicode="/" horiz-adv-x="905" d="M10 -20l545 1503h346l-545 -1503h-346z" />
<glyph unicode="0" d="M72 729q0 390 130 572t398 182q261 0 394.5 -189.5t133.5 -564.5q0 -388 -130 -568.5t-398 -180.5q-262 0 -395 188.5t-133 560.5zM465 729q0 -248 31 -341t104 -93q74 0 104.5 96t30.5 338q0 243 -31 340.5t-104 97.5t-104 -94t-31 -344z" />
<glyph unicode="1" d="M84 1053l502 409h356v-1462h-401v774q0 141 6 258q-37 -45 -92 -94l-166 -137z" />
<glyph unicode="2" d="M45 1249q113 101 190 144.5t167.5 66.5t203.5 23q142 0 253.5 -50t173 -142.5t61.5 -207.5q0 -86 -21.5 -159t-66.5 -143.5t-119.5 -148.5t-317.5 -296v-10h553v-326h-1061v260l357 361q153 160 200 218.5t65.5 100.5t18.5 88q0 57 -37 90t-104 33q-69 0 -139.5 -39.5 t-159.5 -116.5z" />
<glyph unicode="3" d="M70 59v328q96 -49 195.5 -72.5t183.5 -23.5q130 0 189.5 36.5t59.5 114.5q0 60 -31 92.5t-100 49t-180 16.5h-90v297h92q301 0 301 154q0 58 -44.5 86t-119.5 28q-140 0 -290 -94l-164 264q116 80 237.5 114t278.5 34q227 0 356 -90t129 -248q0 -136 -83 -233.5 t-240 -141.5v-6q366 -46 366 -346q0 -204 -161.5 -321t-448.5 -117q-118 0 -218.5 17t-217.5 62z" />
<glyph unicode="4" d="M35 283v290l608 889h365v-884h161v-295h-161v-283h-390v283h-583zM377 578h241v170q0 48 3.5 129.5t5.5 85.5h-11q-34 -77 -77 -144z" />
<glyph unicode="5" d="M94 59v324q87 -40 196.5 -66t188.5 -26q110 0 169 46.5t59 137.5q0 84 -60 131t-182 47q-93 0 -201 -35l-145 72l55 772h834v-329h-498l-18 -193q78 15 111 16.5t61 1.5q126 0 227.5 -58.5t158 -165.5t56.5 -247q0 -245 -147.5 -376t-446.5 -131q-256 0 -418 79z" />
<glyph unicode="6" d="M70 618q0 306 87.5 495.5t258 279.5t420.5 90q89 0 208 -17v-309q-100 19 -217 19q-198 0 -295 -87t-106 -284h12q90 170 289 170q195 0 302.5 -125.5t107.5 -349.5q0 -241 -136 -380.5t-380 -139.5q-259 0 -405 168t-146 470zM463 512q0 -96 41 -157.5t108 -61.5 q63 0 102.5 47.5t39.5 151.5q0 178 -138 178q-68 0 -110.5 -46t-42.5 -112z" />
<glyph unicode="7" d="M78 1133v327h1055v-233l-515 -1227h-409l502 1133h-633z" />
<glyph unicode="8" d="M68 385q0 127 61 216.5t205 162.5q-116 78 -169.5 167.5t-53.5 196.5q0 168 131 261.5t362 93.5t359.5 -93t128.5 -264q0 -116 -60.5 -203.5t-191.5 -152.5q162 -92 228.5 -183.5t66.5 -197.5q0 -195 -141 -302t-394 -107q-258 0 -395 104.5t-137 300.5zM430 401 q0 -62 44 -99.5t122 -37.5q176 0 176 129q0 49 -38.5 96.5t-137.5 106.5q-89 -47 -127.5 -94.5t-38.5 -100.5zM481 1092q0 -86 117 -152q71 41 97 75t26 77q0 48 -35 77t-84 29q-51 0 -86 -29.5t-35 -76.5z" />
<glyph unicode="9" d="M53 958q0 243 138.5 381t379.5 138q268 0 415 -178t147 -506q0 -429 -185 -621t-592 -192q-134 0 -204 10v313q86 -16 172 -16q212 0 327 87.5t125 276.5h-12q-39 -72 -77 -104t-93 -49t-137 -17q-190 0 -297 127t-107 350zM436 963q0 -82 35 -130.5t107 -48.5 q65 0 113 47t48 113q0 89 -44.5 153t-112.5 64q-65 0 -105.5 -47t-40.5 -151z" />
<glyph unicode=":" horiz-adv-x="592" d="M86 166q0 92 54.5 142t158.5 50q99 0 152 -50t53 -142q0 -90 -54.5 -140.5t-150.5 -50.5q-99 0 -156 50t-57 141zM86 956q0 91 55 141t158 50q99 0 152 -50t53 -141q0 -90 -54 -141t-151 -51q-102 0 -157.5 51t-55.5 141z" />
<glyph unicode=";" horiz-adv-x="608" d="M57 -285q29 138 58.5 309.5t40.5 274.5h342l14 -23q-97 -381 -176 -561h-279zM92 956q0 91 53.5 141t157.5 50q100 0 153.5 -50.5t53.5 -140.5t-54 -141t-153 -51q-102 0 -156.5 50.5t-54.5 141.5z" />
<glyph unicode="&#x3c;" horiz-adv-x="1159" d="M72 627v172l1011 506v-297l-620 -283l620 -252v-295z" />
<glyph unicode="=" horiz-adv-x="1159" d="M72 358v271h1015v-271h-1015zM72 815v268h1015v-268h-1015z" />
<glyph unicode="&#x3e;" horiz-adv-x="1159" d="M72 178v295l620 252l-620 283v297l1011 -506v-172z" />
<glyph unicode="?" horiz-adv-x="1034" d="M0 1341q249 142 520 142q223 0 350 -98t127 -267q0 -121 -56.5 -209.5t-180.5 -167.5q-105 -68 -131.5 -99.5t-26.5 -74.5v-51h-307v86q0 98 40 165.5t142 131.5q81 51 116.5 92t35.5 94q0 42 -38 66.5t-99 24.5q-151 0 -353 -107zM252 166q0 92 53.5 142t157.5 50 q100 0 153.5 -50.5t53.5 -141.5t-55.5 -141t-151.5 -50q-99 0 -155 49.5t-56 141.5z" />
<glyph unicode="@" horiz-adv-x="1837" d="M82 610q0 253 114.5 453.5t316 309t456.5 108.5q234 0 413.5 -89t276 -253.5t96.5 -382.5q0 -141 -48.5 -263t-134.5 -191t-196 -69q-79 0 -143 31.5t-100 87.5h-15q-107 -119 -260 -119q-183 0 -281 107t-98 299q0 141 62 249.5t179 167t271 58.5q81 0 178.5 -16.5 t178.5 -44.5l-21 -422l-2 -94q0 -86 49 -86q52 0 84.5 87t32.5 220q0 239 -135 369t-383 130q-190 0 -330.5 -79t-214.5 -226.5t-74 -345.5q0 -255 142.5 -393.5t402.5 -138.5q116 0 250.5 25t263.5 71v-229q-224 -95 -500 -95q-388 0 -609.5 202.5t-221.5 561.5zM760 641 q0 -100 36.5 -145t96.5 -45q77 0 113 62t47 220l10 156q-40 6 -68 6q-108 0 -171.5 -67t-63.5 -187z" />
<glyph unicode="A" horiz-adv-x="1487" d="M0 0l477 1468h527l483 -1468h-432l-72 274h-475l-74 -274h-434zM590 598h311l-63 240q-22 80 -53.5 207t-41.5 182q-9 -51 -35.5 -168t-117.5 -461z" />
<glyph unicode="B" horiz-adv-x="1380" d="M158 0v1462h510q298 0 442.5 -88.5t144.5 -275.5q0 -123 -63 -210t-166 -112v-10q136 -36 197 -120t61 -218q0 -199 -149.5 -313.5t-407.5 -114.5h-569zM553 305h139q185 0 185 156q0 73 -49.5 112t-143.5 39h-131v-307zM553 901h119q85 0 131.5 35t46.5 104 q0 123 -186 123h-111v-262z" />
<glyph unicode="C" horiz-adv-x="1329" d="M104 727q0 227 85.5 399t246 264.5t377.5 92.5q237 0 453 -103l-121 -311q-81 38 -162 64t-174 26q-141 0 -220 -115.5t-79 -318.5q0 -422 321 -422q97 0 188 27t183 65v-334q-183 -81 -414 -81q-331 0 -507.5 192t-176.5 555z" />
<glyph unicode="D" horiz-adv-x="1503" d="M158 0v1462h506q352 0 543.5 -180t191.5 -520q0 -366 -201.5 -564t-566.5 -198h-473zM553 324h88q180 0 264 104.5t84 319.5q0 201 -79.5 298t-241.5 97h-115v-819z" />
<glyph unicode="E" horiz-adv-x="1124" d="M158 0v1462h868v-317h-473v-230h438v-317h-438v-276h473v-322h-868z" />
<glyph unicode="F" horiz-adv-x="1104" d="M158 0v1462h864v-317h-475v-279h438v-317h-438v-549h-389z" />
<glyph unicode="G" horiz-adv-x="1516" d="M104 735q0 354 202 551t566 197q138 0 260.5 -26t213.5 -66l-125 -310q-158 78 -347 78q-173 0 -267.5 -112.5t-94.5 -321.5q0 -205 85.5 -312.5t246.5 -107.5q88 0 162 17v229h-261v305h631v-788q-257 -88 -565 -88q-338 0 -522.5 196t-184.5 559z" />
<glyph unicode="H" horiz-adv-x="1569" d="M158 0v1462h397v-542h459v542h397v-1462h-397v596h-459v-596h-397z" />
<glyph unicode="I" horiz-adv-x="713" d="M158 0v1462h397v-1462h-397z" />
<glyph unicode="J" horiz-adv-x="721" d="M-162 -131q32 -6 68 -13.5t78 -7.5q98 0 140 59t42 202v1353h397v-1319q0 -297 -130 -449.5t-390 -152.5q-108 0 -205 21v307z" />
<glyph unicode="K" horiz-adv-x="1407" d="M158 0v1462h397v-635q30 59 121 187l307 448h432l-461 -655l453 -807h-446l-289 559l-117 -70v-489h-397z" />
<glyph unicode="L" horiz-adv-x="1192" d="M158 0v1462h395v-1143h563v-319h-958z" />
<glyph unicode="M" horiz-adv-x="1980" d="M158 0v1462h526l305 -1038h8l299 1038h527v-1462h-363v641q0 50 1.5 111t13.5 299h-9l-295 -1051h-376l-299 1053h-9q21 -269 21 -418v-635h-350z" />
<glyph unicode="N" horiz-adv-x="1708" d="M158 0v1462h516l532 -1016h6q-14 221 -14 355v661h352v-1462h-518l-534 1030h-9q19 -243 19 -371v-659h-350z" />
<glyph unicode="O" horiz-adv-x="1632" d="M104 735q0 365 182.5 557.5t530.5 192.5q349 0 529 -191t180 -561q0 -369 -181 -561t-530 -192q-344 0 -527.5 193t-183.5 562zM520 733q0 -424 295 -424q150 0 222.5 103t72.5 321q0 219 -73.5 323.5t-219.5 104.5q-297 0 -297 -428z" />
<glyph unicode="P" horiz-adv-x="1294" d="M158 0v1462h506q277 0 416 -121t139 -344q0 -245 -144.5 -378.5t-410.5 -133.5h-111v-485h-395zM553 807h72q89 0 141.5 50t52.5 138q0 148 -164 148h-102v-336z" />
<glyph unicode="Q" horiz-adv-x="1632" d="M104 735q0 365 182.5 557.5t530.5 192.5q349 0 529 -191t180 -561q0 -497 -316 -670l357 -411h-492l-258 325l-1 1v1l-1 1q-344 0 -527.5 193t-183.5 562zM520 733q0 -424 295 -424q150 0 222.5 103t72.5 321q0 219 -73.5 323.5t-219.5 104.5q-297 0 -297 -428z" />
<glyph unicode="R" horiz-adv-x="1386" d="M158 0v1462h479q596 0 596 -432q0 -254 -248 -393l426 -637h-448l-310 532h-100v-532h-395zM553 829h74q207 0 207 183q0 151 -203 151h-78v-334z" />
<glyph unicode="S" horiz-adv-x="1182" d="M90 72v352q113 -58 235 -90.5t224 -32.5q88 0 129 30.5t41 78.5q0 30 -16.5 52.5t-53 45.5t-194.5 94q-143 65 -214.5 126t-106 140t-34.5 187q0 202 147 315t404 113q227 0 463 -105l-121 -305q-205 94 -354 94q-77 0 -112 -27t-35 -67q0 -43 44.5 -77t241.5 -124 q189 -85 262.5 -182.5t73.5 -245.5q0 -136 -69 -241.5t-199 -164t-305 -58.5q-146 0 -245 20.5t-206 71.5z" />
<glyph unicode="T" horiz-adv-x="1210" d="M51 1139v323h1108v-323h-356v-1139h-395v1139h-357z" />
<glyph unicode="U" horiz-adv-x="1550" d="M150 573v889h397v-858q0 -155 58 -225t171 -70q121 0 175.5 69.5t54.5 227.5v856h395v-880q0 -287 -162.5 -444.5t-468.5 -157.5q-299 0 -459.5 153t-160.5 440z" />
<glyph unicode="V" horiz-adv-x="1421" d="M0 1462h444l199 -741q62 -247 68 -344q7 70 28 175t37 165l203 745h442l-479 -1462h-465z" />
<glyph unicode="W" horiz-adv-x="2128" d="M31 1462h381l159 -733q54 -243 74 -387q13 102 46.5 277t62.5 290l129 553h366l125 -553q32 -133 65 -307t44 -260q13 111 71 385l162 735h381l-360 -1462h-467l-140 637q-10 40 -31.5 159t-31.5 199q-8 -65 -26 -161.5t-35.5 -177.5t-145.5 -656h-467z" />
<glyph unicode="X" horiz-adv-x="1481" d="M4 0l485 748l-456 714h438l264 -452l254 452h451l-463 -745l498 -717h-457l-285 457l-282 -457h-447z" />
<glyph unicode="Y" horiz-adv-x="1360" d="M0 1462h430l250 -542l252 542h428l-481 -891v-571h-398v559z" />
<glyph unicode="Z" horiz-adv-x="1251" d="M61 0v244l633 899h-618v319h1108v-243l-633 -900h649v-319h-1139z" />
<glyph unicode="[" horiz-adv-x="664" d="M117 -344v1847h499v-254h-182v-1339h182v-254h-499zM355 1485z" />
<glyph unicode="\" horiz-adv-x="905" d="M6 1483h346l545 -1503h-346z" />
<glyph unicode="]" horiz-adv-x="664" d="M47 -90h182v1339h-182v254h500v-1847h-500v254zM317 1485z" />
<glyph unicode="^" horiz-adv-x="1075" d="M-16 502l440 966h170l508 -966h-295l-289 577l-124 -291l-124 -286h-286z" />
<glyph unicode="_" horiz-adv-x="1024" d="M-4 -133h1032v-246h-1032v246z" />
<glyph unicode="`" horiz-adv-x="1225" d="M264 1548v21h430q52 -70 203 -233l59 -66v-29h-260q-69 44 -203.5 138.5t-228.5 168.5z" />
<glyph unicode="a" horiz-adv-x="1276" d="M74 346q0 181 126 269.5t365 99.5l189 6v16q0 140 -138 140q-124 0 -315 -84l-113 258q198 102 500 102q218 0 337.5 -108t119.5 -302v-743h-271l-75 150h-8q-79 -98 -161 -134t-212 -36q-160 0 -252 96t-92 270zM473 360q0 -104 111 -104q71 0 121.5 45t50.5 117v88 l-90 -4q-193 -7 -193 -142z" />
<glyph unicode="b" horiz-adv-x="1317" d="M135 0v1556h391v-352q0 -63 -14 -217h14q57 88 131.5 127t169.5 39q185 0 293.5 -155t108.5 -429q0 -276 -109.5 -432.5t-304.5 -156.5q-63 0 -112 13.5t-87.5 37.5t-89.5 80h-24l-62 -111h-305zM526 555q0 -139 38 -199.5t124 -60.5q69 0 106 70.5t37 207.5 q0 273 -147 273q-82 0 -120 -57t-38 -179v-55z" />
<glyph unicode="c" horiz-adv-x="1104" d="M86 561q0 282 155 437t441 155q197 0 371 -86l-115 -289q-71 31 -131 49.5t-125 18.5q-95 0 -147 -74t-52 -209q0 -272 201 -272q172 0 330 100v-311q-151 -100 -363 -100q-278 0 -421.5 150t-143.5 431z" />
<glyph unicode="d" horiz-adv-x="1317" d="M86 565q0 276 111 432t305 156q95 0 166.5 -38t130.5 -128h8q-19 133 -19 266v303h394v-1556h-295l-84 143h-15q-101 -163 -301 -163q-121 0 -211.5 69t-140 203t-49.5 313zM481 559q0 -132 43 -201t123 -69q94 0 132.5 59t41.5 182v31q0 150 -43 213.5t-135 63.5 q-77 0 -119.5 -72.5t-42.5 -206.5z" />
<glyph unicode="e" horiz-adv-x="1266" d="M86 559q0 287 145 440.5t414 153.5q256 0 395.5 -133.5t139.5 -384.5v-174h-699q4 -95 69.5 -149t178.5 -54q103 0 189.5 19.5t187.5 66.5v-281q-92 -47 -190 -65t-234 -18q-283 0 -439.5 150.5t-156.5 428.5zM489 707h336q-2 82 -46.5 131t-119.5 49q-69 0 -115.5 -43.5 t-54.5 -136.5z" />
<glyph unicode="f" horiz-adv-x="846" d="M45 840v192l158 96v19q0 224 91.5 322t293.5 98q78 0 147.5 -12t161.5 -42l-84 -253q-72 20 -141 20q-45 0 -65.5 -27.5t-20.5 -89.5v-30h241v-293h-241v-840h-391v840h-150z" />
<glyph unicode="g" horiz-adv-x="1241" d="M20 -180q0 203 252 262q-52 22 -90.5 71t-38.5 97q0 53 29 93.5t121 96.5q-88 39 -138.5 122t-50.5 202q0 185 126 287t360 102q31 0 107 -7t112 -13h395v-189l-155 -57q32 -58 32 -135q0 -183 -128.5 -284t-383.5 -101q-63 0 -100 8q-14 -26 -14 -49q0 -29 47 -44.5 t123 -15.5h188q381 0 381 -321q0 -207 -176.5 -322t-495.5 -115q-241 0 -371.5 80.5t-130.5 231.5zM350 -141q0 -48 52 -77.5t139 -29.5q142 0 227.5 35.5t85.5 91.5q0 45 -52 63.5t-149 18.5h-153q-63 0 -106.5 -29.5t-43.5 -72.5zM473 762q0 -174 121 -174q56 0 86.5 43 t30.5 129q0 176 -117 176q-121 0 -121 -174z" />
<glyph unicode="h" horiz-adv-x="1372" d="M135 0v1556h391v-221q0 -150 -16 -342h18q56 88 133 124t179 36q190 0 295.5 -109.5t105.5 -306.5v-737h-393v618q0 228 -135 228q-96 0 -141.5 -80.5t-45.5 -267.5v-498h-391z" />
<glyph unicode="i" horiz-adv-x="666" d="M127 1415q0 88 49 131t158 43t159 -44t50 -130q0 -172 -209 -172q-207 0 -207 172zM137 0v1133h391v-1133h-391z" />
<glyph unicode="j" horiz-adv-x="664" d="M-104 -162q64 -18 120 -18q119 0 119 170v1143h391v-1225q0 -187 -109.5 -293.5t-310.5 -106.5q-48 0 -110.5 7.5t-99.5 17.5v305zM125 1415q0 88 49 131t158 43t159 -44t50 -130q0 -172 -209 -172q-207 0 -207 172z" />
<glyph unicode="k" horiz-adv-x="1350" d="M135 0v1556h393v-612q0 -157 -22 -307h8q71 113 121 176l254 320h436l-393 -482l418 -651h-447l-248 406l-127 -97v-309h-393z" />
<glyph unicode="l" horiz-adv-x="662" d="M135 0v1556h391v-1556h-391z" />
<glyph unicode="m" horiz-adv-x="2048" d="M135 0v1133h295l49 -140h23q45 78 130.5 119t194.5 41q245 0 344 -149h31q48 70 133.5 109.5t188.5 39.5q201 0 297 -103t96 -313v-737h-391v616q0 115 -31.5 172.5t-99.5 57.5q-90 0 -132 -77t-42 -241v-528h-392v616q0 115 -30 172.5t-97 57.5q-92 0 -134 -82t-42 -268 v-496h-391z" />
<glyph unicode="n" horiz-adv-x="1372" d="M135 0v1133h295l49 -140h23q50 80 138.5 120t203.5 40q188 0 292.5 -109t104.5 -307v-737h-391v618q0 113 -32.5 170.5t-104.5 57.5q-99 0 -143 -79t-44 -271v-496h-391z" />
<glyph unicode="o" horiz-adv-x="1305" d="M86 569q0 277 149.5 430.5t419.5 153.5q167 0 295 -71t197.5 -203.5t69.5 -309.5q0 -278 -149.5 -433.5t-418.5 -155.5q-258 0 -410.5 159t-152.5 430zM483 569q0 -146 39 -222.5t131 -76.5q91 0 128.5 76.5t37.5 222.5q0 145 -38 219t-130 74q-90 0 -129 -73.5 t-39 -219.5z" />
<glyph unicode="p" horiz-adv-x="1317" d="M135 -492v1625h318l55 -144h18q109 164 301 164q188 0 295 -156t107 -428q0 -274 -111.5 -431.5t-302.5 -157.5q-86 0 -154 28.5t-135 102.5h-18q18 -119 18 -148v-455h-391zM526 571q0 -146 39 -211t123 -65q75 0 109 64.5t34 213.5q0 146 -34 209.5t-113 63.5 q-86 0 -120.5 -61.5t-37.5 -182.5v-31z" />
<glyph unicode="q" horiz-adv-x="1317" d="M86 565q0 276 110.5 432t301.5 156q205 0 309 -160h8l29 140h338v-1625h-391v469q0 34 12 166h-12q-96 -163 -299 -163q-190 0 -298 156t-108 429zM483 559q0 -148 41 -212t127 -64q89 0 129.5 55t40.5 186v47q0 150 -41 214.5t-135 64.5q-162 0 -162 -291z" />
<glyph unicode="r" horiz-adv-x="961" d="M135 0v1133h291l61 -181h19q49 90 136.5 145.5t176.5 55.5q51 0 97 -8l22 -4l-35 -369q-48 12 -133 12q-128 0 -186 -58.5t-58 -168.5v-557h-391z" />
<glyph unicode="s" horiz-adv-x="1092" d="M119 819q0 158 122 246t345 88q112 0 210.5 -24.5t204.5 -71.5l-106 -252q-78 35 -165 59.5t-142 24.5q-96 0 -96 -47q0 -29 33.5 -49.5t193.5 -83.5q119 -49 177.5 -96t86 -110.5t27.5 -154.5q0 -182 -124 -275t-356 -93q-126 0 -219 13.5t-190 49.5v313 q91 -40 199.5 -66t193.5 -26q127 0 127 58q0 30 -35.5 53.5t-206.5 91.5q-156 64 -218 145.5t-62 206.5z" />
<glyph unicode="t" horiz-adv-x="942" d="M53 840v159l174 123l101 238h256v-227h278v-293h-278v-441q0 -110 106 -110q79 0 189 39v-285q-79 -34 -150.5 -48.5t-167.5 -14.5q-197 0 -284 96.5t-87 296.5v467h-137z" />
<glyph unicode="u" horiz-adv-x="1372" d="M133 395v738h391v-619q0 -111 31.5 -168t103.5 -57q101 0 144 79.5t43 268.5v496h391v-1133h-295l-49 141h-23q-49 -78 -136.5 -119.5t-205.5 -41.5q-187 0 -291 108.5t-104 306.5z" />
<glyph unicode="v" horiz-adv-x="1251" d="M0 1133h408l192 -670q1 -5 4 -17t6 -28.5t5.5 -35t2.5 -34.5h7q0 52 18 113l201 672h407l-432 -1133h-387z" />
<glyph unicode="w" horiz-adv-x="1864" d="M25 1133h385l92 -435q44 -224 51 -372h6q3 92 55 350l105 457h432l96 -463q46 -221 58 -344h6q6 76 20 189.5t31 182.5l100 435h377l-311 -1133h-418l-128 540l-30 163l-20 131h-6q-49 -280 -66 -353l-115 -481h-411z" />
<glyph unicode="x" horiz-adv-x="1290" d="M10 0l365 578l-346 555h444l172 -318l176 318h445l-355 -555l369 -578h-444l-191 344l-190 -344h-445z" />
<glyph unicode="y" horiz-adv-x="1249" d="M-2 1133h412l192 -650q14 -51 19 -123h8q8 69 24 121l197 652h399l-448 -1205q-86 -230 -211.5 -325t-327.5 -95q-78 0 -160 17v307q53 -12 121 -12q52 0 91 20t68 56.5t62 119.5z" />
<glyph unicode="z" horiz-adv-x="1038" d="M49 0v223l469 611h-442v299h889v-242l-449 -592h471v-299h-938z" />
<glyph unicode="{" horiz-adv-x="887" d="M61 418v301q115 0 180.5 44.5t65.5 125.5v254q0 139 49 208t159.5 100.5t305.5 31.5v-279q-89 -3 -120.5 -13.5t-50.5 -32.5t-19 -60v-271q0 -113 -56.5 -173.5t-183.5 -78.5v-12q128 -20 184 -79t56 -167v-276q0 -39 21 -61t56 -32.5t113 -13.5v-278q-197 0 -307 32 t-158.5 101.5t-48.5 210.5v248q0 80 -67 125t-179 45z" />
<glyph unicode="|" horiz-adv-x="1042" d="M387 -446v2002h268v-2002h-268z" />
<glyph unicode="}" horiz-adv-x="887" d="M66 -66q108 4 149 29.5t41 77.5v276q0 108 56 167t184 79v12q-127 18 -183.5 78.5t-56.5 173.5v271q0 39 -19.5 60.5t-50 32t-120.5 13.5v279q196 0 306 -31.5t159 -100.5t49 -208v-254q0 -81 65 -125.5t180 -44.5v-301q-111 0 -178 -45t-67 -125v-248q0 -140 -49 -210 t-159 -102t-306 -32v278z" />
<glyph unicode="~" horiz-adv-x="1159" d="M72 526v281q104 108 264 108q69 0 130 -13.5t150 -49.5q131 -55 238 -55q50 0 112.5 32t118.5 89v-281q-105 -109 -264 -109q-71 0 -133.5 15t-146.5 49q-131 55 -236 55q-110 0 -233 -121z" />
<glyph unicode="&#xa2;" d="M129 739q0 240 113 388.5t323 189.5v166h207v-154q171 -9 324 -84l-115 -289q-71 31 -131 49.5t-125 18.5q-95 0 -147 -74t-52 -209q0 -272 201 -272q172 0 330 100v-311q-127 -82 -285 -98v-180h-207v186q-212 31 -324 176t-112 397z" />
<glyph unicode="&#xa3;" d="M102 649v277h166v118q0 215 117 328t338 113q210 0 405 -82l-110 -289q-148 55 -252 55q-58 0 -85.5 -33t-27.5 -104v-106h344v-277h-344v-96q0 -150 -159 -227h671v-326h-1061v313q81 47 109.5 76.5t41.5 67.5t13 94v98h-166z" />
<glyph unicode="&#xa5;" d="M8 1462h400l192 -504l193 504h399l-363 -712h195v-211h-242v-117h242v-209h-242v-213h-364v213h-246v209h246v117h-246v211h190z" />
<glyph unicode="&#xa9;" horiz-adv-x="1688" d="M92 731q0 200 100 375t275 276t377 101q197 0 370 -97t277 -272t104 -383q0 -204 -100.5 -376.5t-273 -273.5t-377.5 -101q-207 0 -382 103.5t-272.5 276.5t-97.5 371zM256 731q0 -158 79.5 -295.5t215.5 -215t293 -77.5q158 0 294 78.5t215 215t79 294.5 q0 157 -77.5 293t-214 215.5t-296.5 79.5q-158 0 -294.5 -78.5t-215 -215t-78.5 -294.5zM434 735q0 217 113 340t321 123q166 0 322 -78l-92 -205q-106 56 -211 56q-81 0 -126.5 -61t-45.5 -179q0 -128 43.5 -185t134.5 -57q138 0 258 68v-231q-126 -64 -272 -64 q-212 0 -328.5 124t-116.5 349z" />
<glyph unicode="&#xad;" horiz-adv-x="651" d="M43 393v312h565v-312h-565z" />
<glyph unicode="&#xae;" horiz-adv-x="1688" d="M92 731q0 200 100 375t275 276t377 101q197 0 370 -97t277 -272t104 -383q0 -204 -100.5 -376.5t-273 -273.5t-377.5 -101q-207 0 -382 103.5t-272.5 276.5t-97.5 371zM256 731q0 -158 79.5 -295.5t215.5 -215t293 -77.5q158 0 294 78.5t215 215t79 294.5 q0 157 -77.5 293t-214 215.5t-296.5 79.5q-158 0 -294.5 -78.5t-215 -215t-78.5 -294.5zM506 313v875h291q407 0 407 -270q0 -87 -33 -146.5t-108 -95.5l194 -363h-290l-146 320h-35v-320h-280zM786 809h11q58 0 91.5 21.5t33.5 76.5q0 47 -27.5 66.5t-95.5 19.5h-13v-184z " />
<glyph unicode="&#xb4;" horiz-adv-x="1225" d="M264 1241v29q154 165 195.5 213t68.5 86h428v-21q-80 -64 -220 -163t-212 -144h-260z" />
<glyph unicode="&#x2000;" horiz-adv-x="794" />
<glyph unicode="&#x2001;" horiz-adv-x="1589" />
<glyph unicode="&#x2002;" horiz-adv-x="794" />
<glyph unicode="&#x2003;" horiz-adv-x="1589" />
<glyph unicode="&#x2004;" horiz-adv-x="529" />
<glyph unicode="&#x2005;" horiz-adv-x="397" />
<glyph unicode="&#x2006;" horiz-adv-x="264" />
<glyph unicode="&#x2007;" horiz-adv-x="264" />
<glyph unicode="&#x2008;" horiz-adv-x="198" />
<glyph unicode="&#x2009;" horiz-adv-x="317" />
<glyph unicode="&#x200a;" horiz-adv-x="88" />
<glyph unicode="&#x2010;" horiz-adv-x="651" d="M43 393v312h565v-312h-565z" />
<glyph unicode="&#x2011;" horiz-adv-x="651" d="M43 393v312h565v-312h-565z" />
<glyph unicode="&#x2012;" horiz-adv-x="651" d="M43 393v312h565v-312h-565z" />
<glyph unicode="&#x2013;" horiz-adv-x="1024" d="M74 414v276h876v-276h-876z" />
<glyph unicode="&#x2014;" horiz-adv-x="2048" d="M74 414v276h1896v-276h-1896z" />
<glyph unicode="&#x2018;" horiz-adv-x="512" d="M20 899q100 391 177 561h278q-67 -312 -98 -583h-342z" />
<glyph unicode="&#x2019;" horiz-adv-x="512" d="M37 877q68 317 98 583h342l15 -22q-92 -366 -177 -561h-278z" />
<glyph unicode="&#x201c;" horiz-adv-x="1022" d="M20 899q100 391 177 561h278q-67 -312 -98 -583h-342zM530 899q100 391 177 561h278q-67 -312 -98 -583h-342z" />
<glyph unicode="&#x201d;" horiz-adv-x="1022" d="M37 877q68 317 98 583h342l15 -22q-92 -366 -177 -561h-278zM547 877q68 317 98 583h342l14 -22q-93 -371 -176 -561h-278z" />
<glyph unicode="&#x2022;" horiz-adv-x="803" d="M74 748q0 174 84.5 267t242.5 93t243 -94.5t85 -265.5q0 -172 -87 -266.5t-241 -94.5q-155 0 -241 93t-86 268zM668 1133z" />
<glyph unicode="&#x2026;" horiz-adv-x="1776" d="M86 166q0 92 54.5 142t158.5 50q99 0 152 -50t53 -142q0 -90 -54.5 -140.5t-150.5 -50.5q-99 0 -156 50t-57 141zM678 166q0 92 54.5 142t158.5 50q99 0 152 -50t53 -142q0 -90 -54.5 -140.5t-150.5 -50.5q-99 0 -156 50t-57 141zM1270 166q0 92 54.5 142t158.5 50 q99 0 152 -50t53 -142q0 -90 -54.5 -140.5t-150.5 -50.5q-99 0 -156 50t-57 141z" />
<glyph unicode="&#x202f;" horiz-adv-x="317" />
<glyph unicode="&#x205f;" horiz-adv-x="397" />
<glyph unicode="&#x20ac;" d="M55 467v205h129l-2 21v22l2 43h-129v205h148q51 255 212.5 387.5t413.5 132.5q180 0 349 -76l-119 -299q-120 51 -230 51q-112 0 -171.5 -53.5t-71.5 -142.5h338v-205h-353l-2 -29v-14l2 -44v1h287v-205h-264q33 -164 260 -164q145 0 266 55v-323q-102 -55 -291 -55 q-253 0 -412 126t-206 361h-156z" />
<glyph unicode="&#x2122;" horiz-adv-x="1577" d="M37 1286v176h536v-176h-170v-545h-196v545h-170zM645 741v721h287l137 -479l150 479h276v-721h-195v400q0 68 7 110h-9l-151 -510h-164l-143 510h-9q7 -56 7 -110v-400h-193z" />
<glyph unicode="&#xe000;" horiz-adv-x="1135" d="M0 1135h1135v-1135h-1135v1135z" />
</font>
</defs></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
This is a custom SVG webfont generated by Font Squirrel.
Copyright : Digitized data copyright 20102011 Google Corporation
Foundry : Ascender Corporation
Foundry URL : httpwwwascendercorpcom
</metadata>
<defs>
<font id="OpenSansExtraboldItalic" horiz-adv-x="1188" >
<font-face units-per-em="2048" ascent="1638" descent="-410" />
<missing-glyph horiz-adv-x="532" />
<glyph unicode=" " horiz-adv-x="532" />
<glyph unicode="&#x09;" horiz-adv-x="532" />
<glyph unicode="&#xa0;" horiz-adv-x="532" />
<glyph unicode="!" horiz-adv-x="623" d="M12 127q0 107 65 170t179 63q87 0 133.5 -40.5t46.5 -114.5q0 -110 -63.5 -170t-173.5 -60q-88 0 -137.5 38.5t-49.5 113.5zM125 516l156 946h426l-254 -946h-328z" />
<glyph unicode="&#x22;" horiz-adv-x="930" d="M182 934l72 528h342l-158 -528h-256zM623 934l73 528h342l-157 -528h-258z" />
<glyph unicode="#" horiz-adv-x="1323" d="M14 393l21 238h266l57 200h-235l20 242h285l111 389h270l-111 -389h168l111 389h270l-110 -389h221l-21 -242h-270l-57 -200h243l-20 -238h-293l-111 -393h-270l113 393h-168l-113 -393h-270l112 393h-219zM571 631h168l58 200h-168z" />
<glyph unicode="$" d="M61 162v311q126 -59 228 -86t203 -27q174 0 174 105q0 40 -32.5 72.5t-139.5 83.5q-139 62 -214 160t-75 227q0 176 133.5 288t357.5 127l29 133h168l-31 -137q161 -15 314 -90l-140 -270q-158 71 -295 71q-66 0 -103.5 -28t-37.5 -68q0 -53 39 -89.5t158 -94.5 q140 -68 205 -155.5t65 -213.5q0 -178 -133 -290t-361 -125l-38 -187h-168l41 191q-221 16 -347 92z" />
<glyph unicode="%" horiz-adv-x="1878" d="M80 887q0 173 54 309.5t154.5 211.5t237.5 75q147 0 231.5 -85t84.5 -237q0 -165 -56.5 -303t-158 -215.5t-230.5 -77.5q-159 0 -238 83.5t-79 238.5zM252 0l1089 1462h289l-1081 -1462h-297zM371 891q0 -84 53 -84q52 0 89.5 110.5t37.5 239.5q0 43 -12 63.5t-41 20.5 q-50 0 -88.5 -110t-38.5 -240zM1057 301q0 173 54 309.5t154.5 211.5t237.5 75q147 0 231.5 -85t84.5 -237q0 -164 -56 -302t-158 -215.5t-231 -77.5q-159 0 -238 83t-79 238zM1348 305q0 -84 53 -84q52 0 89.5 110.5t37.5 239.5q0 44 -12 64t-41 20q-50 0 -88.5 -110 t-38.5 -240z" />
<glyph unicode="&#x26;" horiz-adv-x="1501" d="M8 385q0 159 87.5 264.5t271.5 165.5q-37 46 -60.5 118.5t-23.5 131.5q0 197 126 308.5t355 111.5q189 0 302.5 -88t113.5 -236q0 -130 -80 -233t-262 -197l129 -186q36 36 75.5 114.5t63.5 161.5h383q-46 -161 -128.5 -305.5t-189.5 -253.5l191 -262h-442l-43 61 q-155 -81 -349 -81q-244 0 -382 106.5t-138 298.5zM399 424q0 -62 47.5 -99.5t124.5 -37.5t138 26l-193 279q-117 -52 -117 -168zM635 1092q0 -76 51 -144q72 31 106.5 79.5t34.5 107.5q0 35 -22 60.5t-60 25.5q-49 0 -79.5 -34.5t-30.5 -94.5z" />
<glyph unicode="'" horiz-adv-x="487" d="M182 934l72 528h342l-158 -528h-256z" />
<glyph unicode="(" horiz-adv-x="766" d="M68 326q0 330 124.5 619t387.5 558h323q-260 -281 -384 -576t-124 -618q0 -150 32.5 -326t84.5 -307h-293q-67 120 -109 299t-42 351zM720 1485z" />
<glyph unicode=")" horiz-adv-x="766" d="M-133 -324q256 277 378 571.5t122 622.5q0 150 -32.5 322.5t-86.5 310.5h295q71 -124 111 -298t40 -351q0 -341 -123 -628t-378 -550h-326zM420 1485z" />
<glyph unicode="*" horiz-adv-x="1110" d="M152 1108l100 278l319 -165l31 350l307 -62l-116 -331l368 30l-22 -301l-310 41l148 -311l-285 -86l-80 303l-166 -244l-249 185l254 229z" />
<glyph unicode="+" horiz-adv-x="1159" d="M102 586v272h353v352h270v-352h352v-272h-352v-348h-270v348h-353z" />
<glyph unicode="," horiz-adv-x="627" d="M-104 -264q53 121 147 387l41 115h348l8 -23q-116 -262 -256 -479h-288z" />
<glyph unicode="-" horiz-adv-x="674" d="M23 393l63 312h553l-64 -312h-552z" />
<glyph unicode="." horiz-adv-x="627" d="M0 127q0 109 65 171t179 62q84 0 132 -40t48 -115q0 -118 -60 -174t-190 -56q-78 0 -126 37t-48 115z" />
<glyph unicode="/" horiz-adv-x="956" d="M-90 -20l838 1503h344l-838 -1503h-344z" />
<glyph unicode="0" d="M63 465q0 295 85 533.5t235 362.5t348 124q135 0 230.5 -62.5t145.5 -174.5t50 -265q0 -298 -85 -529.5t-235 -352.5t-348 -121q-210 0 -318 126t-108 359zM453 457q0 -84 15 -123t60 -39q58 0 111.5 94.5t91 265.5t37.5 336q0 85 -18.5 131.5t-63.5 46.5 q-55 0 -110 -111t-89 -282t-34 -319z" />
<glyph unicode="1" d="M150 1079l620 383h311l-307 -1462h-389l174 799q28 132 76 256q-78 -68 -131 -103l-203 -125z" />
<glyph unicode="2" d="M-57 0l53 256l483 436q248 221 248 361q0 49 -26 73.5t-66 24.5q-120 0 -281 -147l-186 258q234 221 541 221q183 0 295 -99.5t112 -269.5q0 -152 -87 -285t-298 -315l-205 -176v-12h490l-68 -326h-1005z" />
<glyph unicode="3" d="M14 59v332q167 -100 377 -100q138 0 206.5 46.5t68.5 133.5q0 54 -27 81t-86 39.5t-166 12.5h-84l53 291h78q147 0 229 46.5t82 127.5q0 46 -36 74t-99 28q-117 0 -270 -84l-158 248q126 81 243.5 114.5t258.5 33.5q201 0 321.5 -93t120.5 -253q0 -148 -89.5 -245 t-252.5 -130v-8q129 -25 202 -111.5t73 -212.5q0 -216 -178 -333t-482 -117q-116 0 -217.5 20.5t-167.5 58.5z" />
<glyph unicode="4" d="M-10 283l51 256l762 923h360l-186 -884h149l-61 -295h-150l-59 -283h-377l60 283h-549zM391 578h209l49 194q29 107 60 211h-9q-51 -97 -114 -172z" />
<glyph unicode="5" d="M20 63v324q79 -45 181 -70.5t184 -25.5q277 0 277 192q0 76 -50.5 123t-136.5 47q-53 0 -111 -10t-92 -22l-122 92l215 749h813l-68 -323h-471l-59 -185q35 4 75 4q181 0 293.5 -117.5t112.5 -316.5q0 -261 -161 -402.5t-466 -141.5q-129 0 -244.5 22t-169.5 61z" />
<glyph unicode="6" d="M78 471q0 105 26 254q85 392 298.5 575t568.5 183q102 0 233 -31l-63 -303q-95 25 -183 25q-145 0 -237 -34t-151.5 -108.5t-106.5 -224.5h8q106 170 307 170q160 0 244 -103t84 -299q0 -175 -68.5 -311.5t-197 -210t-297.5 -73.5q-225 0 -345 124t-120 367zM463 420 q0 -66 26.5 -99.5t71.5 -33.5q66 0 109 76.5t43 181.5q0 129 -92 129q-68 0 -113 -73t-45 -181z" />
<glyph unicode="7" d="M35 0l717 1135h-574l70 327h1030l-51 -231l-744 -1231h-448z" />
<glyph unicode="8" d="M49 338q0 301 332 418q-156 121 -156 309q0 121 60.5 216.5t174 149.5t265.5 54q200 0 316 -92.5t116 -241.5q0 -128 -77.5 -228.5t-202.5 -140.5q92 -71 140 -158t48 -204q0 -206 -141 -323t-387 -117q-225 0 -356.5 99t-131.5 259zM414 385q0 -54 36.5 -88.5 t96.5 -34.5q70 0 112.5 42t42.5 110q0 115 -118 194q-170 -90 -170 -223zM588 1065q0 -38 23.5 -77t62.5 -58q58 22 92.5 71t34.5 103q0 49 -28.5 73.5t-65.5 24.5q-48 0 -83.5 -39.5t-35.5 -97.5z" />
<glyph unicode="9" d="M106 10v314q92 -37 203 -37q187 0 291.5 87t144.5 281h-8q-59 -95 -132 -134.5t-169 -39.5q-151 0 -239 110t-88 296q0 176 65.5 310.5t190 210t297.5 75.5q230 0 352.5 -137.5t122.5 -393.5q0 -293 -103 -519.5t-285.5 -339.5t-431.5 -113q-115 0 -211 30zM502 932 q0 -144 92 -144q74 0 125 70.5t51 171.5q0 66 -27.5 106t-70.5 40q-73 0 -121.5 -71t-48.5 -173z" />
<glyph unicode=":" horiz-adv-x="627" d="M0 127q0 109 65 171t179 62q84 0 132 -40t48 -115q0 -118 -60 -174t-190 -56q-78 0 -126 37t-48 115zM195 915q0 110 65 171t176 61q82 0 132 -37.5t50 -116.5q0 -119 -59 -175t-190 -56q-79 0 -126.5 37.5t-47.5 115.5z" />
<glyph unicode=";" horiz-adv-x="627" d="M-117 -264q65 147 148 387l41 115h348l8 -23q-116 -262 -256 -479h-289zM195 915q0 110 65 171t176 61q82 0 132 -37.5t50 -116.5q0 -119 -59 -175t-190 -56q-79 0 -126.5 37.5t-47.5 115.5z" />
<glyph unicode="&#x3c;" horiz-adv-x="1159" d="M88 627v172l973 508v-299l-576 -283l576 -252v-297z" />
<glyph unicode="=" horiz-adv-x="1159" d="M102 399v271h975v-271h-975zM102 774v266h975v-266h-975z" />
<glyph unicode="&#x3e;" horiz-adv-x="1159" d="M109 176v297l575 252l-575 283v299l972 -508v-172z" />
<glyph unicode="?" horiz-adv-x="999" d="M162 1348q231 135 461 135q201 0 319.5 -90t118.5 -248q0 -89 -27.5 -156t-79 -120.5t-170.5 -125.5q-100 -60 -142.5 -100t-55.5 -84l-15 -43h-315l12 64q15 80 42 138t71 104t141 110q89 58 125.5 95t36.5 77q0 70 -90 70q-126 0 -313 -109zM176 127q0 107 65 170 t179 63q87 0 133.5 -40.5t46.5 -114.5q0 -110 -63.5 -170t-174.5 -60q-87 0 -136.5 39t-49.5 113z" />
<glyph unicode="@" horiz-adv-x="1837" d="M82 500q0 288 117 511t335.5 347.5t485.5 124.5q355 0 554.5 -174t199.5 -482q0 -170 -69.5 -314t-191 -225t-266.5 -81q-170 0 -219 129h-10q-48 -65 -111.5 -97t-156.5 -32q-117 0 -191 83.5t-74 221.5q0 156 74 294.5t196.5 211t276.5 72.5q155 0 336 -70l-100 -414 q-23 -94 -23 -137q0 -41 39 -41q64 0 116 48.5t81.5 138.5t29.5 206q0 213 -133.5 322.5t-382.5 109.5q-187 0 -336.5 -91.5t-232 -258t-82.5 -379.5q0 -145 55 -254t153.5 -168t223.5 -59q103 0 234 24.5t245 69.5v-225q-90 -43 -223.5 -70.5t-251.5 -27.5 q-209 0 -367.5 83.5t-244.5 240t-86 362.5zM764 532q0 -104 78 -104q61 0 99.5 51.5t74.5 188.5l47 190q-23 10 -51 10q-73 0 -128.5 -47.5t-87.5 -127t-32 -161.5z" />
<glyph unicode="A" horiz-adv-x="1384" d="M-121 0l744 1462h503l123 -1462h-381l-10 274h-448l-125 -274h-406zM553 586h293l-17 424l-2 86q0 75 4 131q-24 -86 -61 -166z" />
<glyph unicode="B" horiz-adv-x="1298" d="M33 0l309 1462h487q217 0 329 -82.5t112 -236.5q0 -288 -297 -377v-8q88 -29 140 -101.5t52 -177.5q0 -229 -152.5 -354t-432.5 -125h-547zM489 305h82q86 0 143.5 48.5t57.5 121.5q0 69 -33 103t-116 34h-68zM614 901h72q88 0 133 38t45 122q0 102 -127 102h-63z" />
<glyph unicode="C" horiz-adv-x="1290" d="M104 549q0 266 101.5 488t276 335t399.5 113q265 0 481 -131l-148 -305q-93 55 -171 82.5t-162 27.5q-108 0 -195 -78t-136.5 -215t-49.5 -297q0 -134 56 -200t161 -66q83 0 168 20.5t200 69.5v-323q-203 -90 -440 -90q-260 0 -400.5 148.5t-140.5 420.5z" />
<glyph unicode="D" horiz-adv-x="1401" d="M33 0l309 1462h416q276 0 427.5 -144.5t151.5 -408.5q0 -280 -99 -485.5t-287.5 -314.5t-446.5 -109h-471zM494 324h69q110 0 196.5 70t134.5 199.5t48 295.5q0 125 -54 189.5t-151 64.5h-71z" />
<glyph unicode="E" horiz-adv-x="1151" d="M33 0l309 1462h868l-65 -317h-477l-47 -230h444l-72 -317h-444l-57 -276h477l-68 -322h-868z" />
<glyph unicode="F" horiz-adv-x="1165" d="M33 0l309 1462h862l-67 -317h-471l-58 -279h436l-69 -319h-438l-113 -547h-391z" />
<glyph unicode="G" horiz-adv-x="1430" d="M104 563q0 267 110 482t301.5 327.5t445.5 112.5q266 0 448 -107l-147 -309q-153 90 -306 90q-132 0 -233.5 -72.5t-162 -214.5t-60.5 -303q0 -264 209 -264q63 0 133 14l51 232h-229l67 305h610l-167 -795q-250 -81 -521 -81q-261 0 -405 152t-144 431z" />
<glyph unicode="H" horiz-adv-x="1462" d="M33 0l309 1462h391l-112 -542h348l112 542h392l-310 -1462h-391l125 596h-346l-127 -596h-391z" />
<glyph unicode="I" horiz-adv-x="727" d="M31 0l309 1462h397l-309 -1462h-397z" />
<glyph unicode="J" horiz-adv-x="764" d="M-328 -113q99 -24 174 -24q107 0 162 59t84 195l289 1345h391l-299 -1394q-43 -200 -113 -312.5t-182.5 -164.5t-292.5 -52q-106 0 -213 29v319z" />
<glyph unicode="K" horiz-adv-x="1370" d="M33 0l309 1462h391l-135 -624l38 59q88 143 130 195l297 370h459l-551 -674l270 -788h-438l-174 578l-97 -56l-108 -522h-391z" />
<glyph unicode="L" horiz-adv-x="1079" d="M33 0l309 1462h391l-241 -1143h477l-68 -319h-868z" />
<glyph unicode="M" horiz-adv-x="1862" d="M33 0l309 1462h518v-1038h8l478 1038h526l-313 -1462h-351l117 549q50 228 108 436l15 64h-8l-482 -1049h-370v1049h-8q-67 -417 -86 -512l-113 -537h-348z" />
<glyph unicode="N" horiz-adv-x="1618" d="M33 0l309 1462h455l286 -983h9q29 236 57 371l131 612h348l-309 -1462h-455l-289 1028h-8q-29 -291 -57 -418l-129 -610h-348z" />
<glyph unicode="O" horiz-adv-x="1509" d="M104 543q0 265 103 487t280.5 338.5t409.5 116.5q260 0 404.5 -148.5t144.5 -414.5t-99.5 -486.5t-274.5 -338t-406 -117.5q-269 0 -415.5 149t-146.5 414zM500 545q0 -242 200 -242q95 0 176.5 83t128 224t46.5 308q0 114 -48 178.5t-139 64.5q-99 0 -182 -84 t-132.5 -231t-49.5 -301z" />
<glyph unicode="P" horiz-adv-x="1276" d="M33 0l309 1462h373q259 0 397.5 -113.5t138.5 -324.5q0 -252 -171.5 -395.5t-469.5 -143.5h-86l-100 -485h-391zM594 805h63q91 0 147 58.5t56 148.5q0 59 -36 95t-99 36h-59z" />
<glyph unicode="Q" horiz-adv-x="1509" d="M104 543q0 265 102.5 486t282 338.5t414.5 117.5q258 0 400.5 -149.5t142.5 -413.5q0 -280 -114 -509t-310 -339l238 -422h-439l-162 328h-12q-258 0 -400.5 149.5t-142.5 413.5zM500 539q0 -115 47.5 -172.5t134.5 -57.5q102 0 186.5 81t133.5 224.5t49 311.5 q0 114 -47 172.5t-134 58.5q-103 0 -188.5 -83t-133.5 -226t-48 -309z" />
<glyph unicode="R" horiz-adv-x="1331" d="M33 0l309 1462h387q252 0 386 -100t134 -301q0 -156 -71 -272t-211 -177l224 -516l40 -96h-426l-195 532h-73l-113 -532h-391zM600 829h51q95 0 151 54.5t56 152.5q0 62 -34.5 94.5t-100.5 32.5h-53z" />
<glyph unicode="S" horiz-adv-x="1122" d="M43 76v350q84 -53 192.5 -89t196.5 -36q74 0 112 31t38 88q0 27 -12 50.5t-34 47t-118 103.5q-117 94 -170 192t-53 215q0 131 65.5 235.5t185 162t267.5 57.5q239 0 430 -107l-135 -297q-171 88 -291 88q-64 0 -98.5 -28t-34.5 -82q0 -49 33.5 -91.5t127.5 -113.5 q118 -87 175 -183t57 -220q0 -222 -147 -345.5t-410 -123.5q-110 0 -208 24.5t-169 71.5z" />
<glyph unicode="T" horiz-adv-x="1130" d="M156 1139l69 323h1028l-71 -323h-318l-237 -1139h-391l237 1139h-317z" />
<glyph unicode="U" horiz-adv-x="1436" d="M125 410q0 64 12 129l199 923h391l-195 -913q-14 -68 -14 -115q0 -127 121 -127q94 0 147.5 64.5t81.5 197.5l191 893h391l-199 -932q-59 -281 -225 -415.5t-451 -134.5q-134 0 -236.5 55t-158 154t-55.5 221z" />
<glyph unicode="V" horiz-adv-x="1264" d="M150 1462h382l27 -801v-51q0 -144 -16 -256h8q14 64 44.5 157.5t55.5 145.5l350 805h414l-725 -1462h-436z" />
<glyph unicode="W" horiz-adv-x="1915" d="M152 1462h370l-10 -733q-6 -267 -25 -375l40 104l94 232l335 772h336v-792q0 -156 -26 -316q10 28 133 346l303 762h387l-635 -1462h-461v620q0 155 13 324q-33 -133 -118 -349l-253 -595h-434z" />
<glyph unicode="X" horiz-adv-x="1358" d="M-125 0l563 776l-223 686h416l123 -469l309 469h448l-538 -725l262 -737h-432l-146 498l-338 -498h-444z" />
<glyph unicode="Y" horiz-adv-x="1237" d="M164 1462h403l90 -542l312 542h436l-612 -895l-121 -567h-391l120 567z" />
<glyph unicode="Z" horiz-adv-x="1104" d="M-92 0l47 242l690 901h-479l67 319h986l-52 -245l-700 -898h543l-68 -319h-1034z" />
<glyph unicode="[" horiz-adv-x="737" d="M-53 -344l393 1847h530l-55 -254h-215l-285 -1339h215l-53 -254h-530zM182 -324zM491 1485z" />
<glyph unicode="\" horiz-adv-x="956" d="M221 1483h309l248 -1503h-319z" />
<glyph unicode="]" horiz-adv-x="737" d="M-133 -344l53 254h213l285 1339h-215l55 254h528l-393 -1847h-526zM65 -324zM533 1485z" />
<glyph unicode="^" horiz-adv-x="1096" d="M-6 502l631 960h172l284 -960h-274l-156 569l-360 -569h-297z" />
<glyph unicode="_" horiz-adv-x="922" d="M-184 -379l57 246h930l-58 -246h-929z" />
<glyph unicode="`" horiz-adv-x="1135" d="M485 1548v21h396q29 -157 94 -303v-25h-236q-82 75 -152 159t-102 148z" />
<glyph unicode="a" horiz-adv-x="1243" d="M84 412q0 179 73 365t184.5 281t246.5 95q84 0 148 -37.5t114 -122.5h8l53 140h310l-240 -1133h-309l10 123h-8q-56 -78 -121 -110.5t-147 -32.5q-158 0 -240 111.5t-82 320.5zM479 434q0 -143 86 -143q50 0 95.5 58.5t72.5 156.5t27 192q0 65 -20 104.5t-62 39.5 q-76 0 -137.5 -126.5t-61.5 -281.5z" />
<glyph unicode="b" horiz-adv-x="1243" d="M23 0l329 1556h387l-49 -231q-38 -175 -90 -301h8q48 59 77.5 81.5t66.5 35t86 12.5q155 0 238 -111.5t83 -320.5q0 -178 -70.5 -362t-182.5 -281.5t-249 -97.5q-83 0 -145 32t-125 113h-8l-49 -125h-307zM485 434q0 -65 19 -104t59 -39q49 0 96 59t76 156t29 192 q0 144 -86 144q-50 0 -95 -57t-71.5 -154t-26.5 -197z" />
<glyph unicode="c" horiz-adv-x="1032" d="M84 442q0 201 76.5 364.5t215 255t314.5 91.5q195 0 367 -80l-123 -287q-133 60 -225 60q-62 0 -115 -48t-87 -143.5t-34 -187.5q0 -91 30 -133.5t95 -42.5q72 0 139.5 23t143.5 63v-307q-80 -44 -168.5 -67t-206.5 -23q-199 0 -310.5 120.5t-111.5 341.5z" />
<glyph unicode="d" horiz-adv-x="1237" d="M84 412q0 178 71.5 363t183.5 281.5t247 96.5q75 0 126 -30.5t111 -121.5h8l2 37q7 138 25 217l62 301h391l-330 -1556h-309l10 123h-8q-57 -79 -120 -111t-148 -32q-158 0 -240 111.5t-82 320.5zM479 434q0 -143 86 -143q50 0 95.5 58.5t72.5 156.5t27 192 q0 144 -80 144q-49 0 -96 -59t-76 -155.5t-29 -193.5z" />
<glyph unicode="e" horiz-adv-x="1186" d="M84 428q0 211 83.5 380.5t229 257t336.5 87.5q190 0 299 -86t109 -229q0 -201 -156.5 -308.5t-452.5 -107.5h-59v-16q0 -148 164 -148q79 0 155 23.5t173 74.5v-274q-112 -57 -209 -79.5t-224 -22.5q-212 0 -330 118.5t-118 329.5zM512 664h29q109 0 171 41.5t62 109.5 q0 32 -20 54t-64 22q-61 0 -114 -69.5t-64 -157.5z" />
<glyph unicode="f" horiz-adv-x="840" d="M-209 -162q63 -18 117 -18q74 0 112 30t52 95l190 897h-166l43 190l189 96l16 74q43 192 146.5 278.5t275.5 86.5q80 0 155 -16t128 -42l-99 -264q-64 31 -129 31q-35 0 -59.5 -18.5t-32.5 -53.5l-16 -71h211l-66 -291h-209l-205 -959q-43 -192 -153.5 -283.5 t-292.5 -91.5q-110 0 -207 27v303z" />
<glyph unicode="g" horiz-adv-x="1145" d="M-133 -207q0 98 68 169t212 118q-37 23 -60.5 60t-23.5 79q0 71 51 126t152 101q-131 103 -131 281q0 196 136 311t368 115q51 0 107.5 -6t89.5 -14h399l-41 -207l-160 -52q10 -40 10 -94q0 -191 -130 -308.5t-339 -117.5q-76 0 -124 13q-20 -11 -34 -22t-14 -30 q0 -43 111 -59l137 -18q174 -25 250 -91.5t76 -189.5q0 -215 -168.5 -332t-478.5 -117q-212 0 -337.5 75.5t-125.5 209.5zM197 -152q0 -86 170 -86q125 0 190.5 29t65.5 82q0 36 -33 54.5t-115 27.5l-115 12q-78 -11 -120.5 -41.5t-42.5 -77.5zM500 692q0 -94 67 -94 q52 0 85.5 68.5t33.5 158.5q0 95 -61 95q-38 0 -66 -33.5t-43.5 -87.5t-15.5 -107z" />
<glyph unicode="h" horiz-adv-x="1274" d="M23 0l329 1556h387l-53 -249q-35 -158 -88 -283h8q101 129 273 129q141 0 220 -85.5t79 -236.5q0 -106 -25 -229l-127 -602h-387l129 618q18 78 18 142q0 43 -22 64.5t-53 21.5q-125 0 -185 -293l-116 -553h-387z" />
<glyph unicode="i" horiz-adv-x="666" d="M23 0l239 1133h389l-241 -1133h-387zM309 1382q0 103 59.5 156t166.5 53q91 0 140.5 -36.5t49.5 -104.5q0 -100 -58 -154.5t-167 -54.5q-191 0 -191 141z" />
<glyph unicode="j" horiz-adv-x="666" d="M-264 -162q56 -18 112 -18q142 0 175 147l247 1166h387l-260 -1227q-40 -193 -157 -295.5t-297 -102.5q-110 0 -207 27v303zM317 1382q0 103 59.5 156t166.5 53q91 0 140.5 -36.5t49.5 -104.5q0 -94 -55 -151.5t-170 -57.5q-191 0 -191 141z" />
<glyph unicode="k" horiz-adv-x="1264" d="M23 0l325 1556h387l-139 -663q-17 -77 -68 -223h9q84 127 153 200l242 263h442l-491 -512l274 -621h-438l-139 391l-101 -53l-69 -338h-387z" />
<glyph unicode="l" horiz-adv-x="666" d="M23 0l329 1556h387l-329 -1556h-387z" />
<glyph unicode="m" horiz-adv-x="1896" d="M23 0l239 1133h309l-16 -187h8q61 114 137 160.5t191 46.5q117 0 180.5 -53.5t89.5 -153.5h8q65 106 149 156.5t195 50.5q141 0 214 -84.5t73 -249.5q0 -97 -22 -205l-125 -614h-387l129 631q14 56 14 133q0 40 -19 61t-51 21q-74 0 -119.5 -76t-76.5 -227l-111 -543 h-387l131 631q15 90 15 121q0 94 -72 94q-68 0 -113.5 -74.5t-77.5 -220.5l-118 -551h-387z" />
<glyph unicode="n" horiz-adv-x="1274" d="M23 0l239 1133h309l-12 -158h8q55 95 129.5 136.5t182.5 41.5q141 0 220 -85.5t79 -236.5q0 -106 -25 -229l-127 -602h-387l129 618q18 78 18 142q0 43 -22 64.5t-53 21.5q-57 0 -105.5 -71t-79.5 -222l-116 -553h-387z" />
<glyph unicode="o" horiz-adv-x="1243" d="M84 416q0 210 79.5 379.5t223.5 263.5t336 94q209 0 322.5 -113t113.5 -323t-79.5 -379.5t-223.5 -263.5t-336 -94q-209 0 -322.5 113t-113.5 323zM479 403q0 -133 84 -133q81 0 141 139t60 320q0 66 -23 99.5t-63 33.5q-82 0 -140.5 -139.5t-58.5 -319.5z" />
<glyph unicode="p" horiz-adv-x="1243" d="M-82 -492l344 1625h309l-12 -127h8q96 147 258 147q156 0 245 -111.5t89 -306.5q0 -203 -70 -382.5t-185.5 -276t-252.5 -96.5q-143 0 -231 145h-8q-12 -166 -56 -371l-51 -246h-387zM485 434q0 -65 23 -104t65 -39q48 0 92 57t71.5 153t27.5 197q0 144 -86 144 q-50 0 -95 -57t-71.5 -154t-26.5 -197z" />
<glyph unicode="q" horiz-adv-x="1243" d="M84 408q0 181 71.5 366.5t183 282t247.5 96.5q89 0 145.5 -33t118.5 -127h8l53 140h310l-344 -1625h-392l68 293q25 116 90 310h-8q-55 -74 -114 -102.5t-134 -28.5q-89 0 -158 50.5t-107 148t-38 229.5zM479 434q0 -143 86 -143q50 0 95.5 58.5t72.5 156.5t27 192 q0 144 -80 144q-49 0 -96 -59t-76 -155.5t-29 -193.5z" />
<glyph unicode="r" horiz-adv-x="895" d="M23 0l239 1133h309l-18 -189h8q65 112 141 160.5t199 48.5q56 0 80 -8l-84 -383q-54 22 -123 22q-103 0 -164.5 -70.5t-93.5 -215.5l-106 -498h-387z" />
<glyph unicode="s" horiz-adv-x="1028" d="M31 43v311q92 -50 171 -70t160 -20q68 0 102 18.5t34 51.5q0 35 -26 60.5t-130 84.5q-106 58 -154.5 133t-48.5 183q0 172 121 265t344 93q112 0 204 -26t179 -80l-121 -252q-66 43 -136.5 68.5t-121.5 25.5q-76 0 -76 -68q0 -29 31.5 -51t102.5 -57q225 -112 225 -320 q0 -199 -130 -306t-374 -107q-222 0 -356 63z" />
<glyph unicode="t" horiz-adv-x="936" d="M63 842l41 190l218 88l137 240h258l-49 -227h288l-63 -291h-289l-84 -383q-16 -77 -16 -105q0 -63 63 -63q66 0 183 47v-291q-136 -67 -340 -67q-148 0 -224.5 63.5t-76.5 208.5q0 76 24 188l84 402h-154z" />
<glyph unicode="u" horiz-adv-x="1274" d="M96 301q0 106 25 229l127 603h387l-129 -617q-19 -82 -19 -141q0 -44 22.5 -65t53.5 -21q59 0 107.5 78.5t77.5 214.5l116 551h387l-239 -1133h-310l13 158h-8q-54 -93 -128.5 -135.5t-183.5 -42.5q-141 0 -220 85.5t-79 235.5z" />
<glyph unicode="v" horiz-adv-x="1114" d="M88 1133h385l27 -603q0 -73 -8 -118h8q1 14 18 63t36 90t265 568h414l-612 -1133h-388z" />
<glyph unicode="w" horiz-adv-x="1686" d="M102 1133h365v-512q0 -182 -8 -259h8q46 177 88 295l172 476h428l-20 -476q-9 -129 -33 -295h8q7 22 15.5 47.5t48.5 140t241 583.5h385l-538 -1133h-422l20 449q2 73 11.5 209t21.5 219h-8q-60 -233 -121 -390l-189 -487h-407z" />
<glyph unicode="x" horiz-adv-x="1159" d="M-119 0l473 578l-207 555h422l76 -314l186 314h459l-465 -576l228 -557h-428l-80 328l-211 -328h-453z" />
<glyph unicode="y" horiz-adv-x="1114" d="M-129 -168q46 -12 109 -12q87 0 142.5 36.5t98.5 114.5l23 41l-162 1121h389l43 -562l2 -62v-87h8q37 132 50 165.5t239 545.5h416l-670 -1276q-96 -185 -223 -267t-311 -82q-92 0 -154 17v307z" />
<glyph unicode="z" horiz-adv-x="993" d="M-41 0l43 221l502 613h-348l67 299h811l-53 -242l-496 -592h383l-65 -299h-844z" />
<glyph unicode="{" horiz-adv-x="735" d="M-16 434l53 287q119 0 175 38.5t77 133.5l55 246q28 124 76.5 190t130 99.5t203.5 33.5h129l-62 -280q-81 -2 -120 -29.5t-56 -99.5l-53 -258q-20 -96 -85.5 -151.5t-193.5 -70.5v-8q90 -29 130 -87t40 -146q0 -17 -10 -74l-35 -164q-6 -30 -6 -49q0 -88 113 -88v-281 h-82q-183 0 -272 68.5t-89 208.5q0 63 15 127l37 174q6 24 6 43q0 75 -42 106t-134 31z" />
<glyph unicode="|" horiz-adv-x="1159" d="M442 -465v2013h271v-2013h-271z" />
<glyph unicode="}" horiz-adv-x="735" d="M-123 -43q73 3 109 13.5t54 33.5t30 82l53 258q21 99 88 154t190 67v8q-170 55 -170 234q0 12 11 74l34 163q7 29 7 50q0 88 -136 88l54 280h61q168 0 259 -70.5t91 -203.5q0 -69 -14 -129l-37 -174q-6 -26 -6 -43q0 -66 44.5 -100.5t148.5 -34.5l-58 -287 q-121 0 -182.5 -40.5t-81.5 -133.5l-55 -246q-37 -171 -137.5 -247.5t-282.5 -76.5h-74v281z" />
<glyph unicode="~" horiz-adv-x="1159" d="M96 524v285q107 109 262 109q61 0 110.5 -11.5t152.5 -52.5q67 -28 114 -41.5t99 -13.5q51 0 115.5 32t121.5 89v-285q-107 -109 -262 -109q-62 0 -113.5 12.5t-148.5 51.5q-75 31 -118.5 43t-92.5 12q-52 0 -114.5 -30t-125.5 -91z" />
<glyph unicode="&#xa2;" d="M154 586q0 306 140.5 510t371.5 239l32 148h230l-33 -150q122 -19 231 -76l-122 -286q-79 37 -128 48t-98 11q-63 0 -115 -49.5t-84 -146.5t-32 -207q0 -79 31 -113.5t90 -34.5q72 0 140 25t142 65v-311q-145 -78 -307 -90l-41 -188h-229l51 208q-270 74 -270 398z" />
<glyph unicode="&#xa3;" d="M-18 0l63 313q76 21 120.5 49t69 69.5t41.5 123.5l21 96h-188l57 279h188l23 129q26 149 85 243t150.5 137.5t237.5 43.5q89 0 177 -19t196 -67l-144 -299q-66 31 -114 47t-99 16q-35 0 -56.5 -24.5t-35.5 -92.5l-24 -114h251l-57 -279h-252l-20 -94 q-16 -74 -69.5 -133.5t-133.5 -93.5h604l-72 -330h-1019z" />
<glyph unicode="&#xa5;" d="M76 190l43 205h227l25 129h-226l45 205h179l-187 733h385l72 -487l293 487h393l-489 -733h184l-45 -205h-223l-27 -129h223l-43 -205h-223l-41 -190h-379l41 190h-227z" />
<glyph unicode="&#xa9;" horiz-adv-x="1688" d="M113 731q0 202 101.5 378t275.5 275t374 99t375 -100t276 -275t101 -377q0 -197 -97 -370t-272 -277t-383 -104q-206 0 -380 102.5t-272.5 276.5t-98.5 372zM276 731q0 -158 78.5 -294t215 -215t294.5 -79q157 0 293 77.5t215.5 214t79.5 296.5q0 158 -78.5 294.5 t-215 215t-294.5 78.5t-295.5 -79.5t-215 -215.5t-77.5 -293zM461 735q0 220 113.5 341.5t320.5 121.5q166 0 332 -82l-92 -205q-114 60 -222 60q-80 0 -126 -61t-46 -179q0 -128 44 -185t135 -57q138 0 258 68v-231q-126 -64 -273 -64q-213 0 -328.5 125t-115.5 348z" />
<glyph unicode="&#xad;" horiz-adv-x="674" d="M23 393l63 312h553l-64 -312h-552z" />
<glyph unicode="&#xae;" horiz-adv-x="1688" d="M113 731q0 202 101.5 378t275.5 275t374 99t375 -100t276 -275t101 -377q0 -197 -97 -370t-272 -277t-383 -104q-206 0 -380 102.5t-272.5 276.5t-98.5 372zM276 731q0 -158 78.5 -294t215 -215t294.5 -79q157 0 293 77.5t215.5 214t79.5 296.5q0 158 -78.5 294.5 t-215 215t-294.5 78.5t-295.5 -79.5t-215 -215.5t-77.5 -293zM535 313v875h290q214 0 317 -70.5t103 -199.5q0 -91 -44.5 -153t-139.5 -97l211 -355h-285l-160 320h-12v-320h-280zM815 809h10q78 0 108 22t30 76t-35.5 70t-104.5 16h-8v-184z" />
<glyph unicode="&#xb4;" horiz-adv-x="1135" d="M453 1241v23q123 102 282 305h439v-15q-45 -54 -191.5 -157t-245.5 -156h-284z" />
<glyph unicode="&#x2000;" horiz-adv-x="795" />
<glyph unicode="&#x2001;" horiz-adv-x="1591" />
<glyph unicode="&#x2002;" horiz-adv-x="795" />
<glyph unicode="&#x2003;" horiz-adv-x="1591" />
<glyph unicode="&#x2004;" horiz-adv-x="530" />
<glyph unicode="&#x2005;" horiz-adv-x="397" />
<glyph unicode="&#x2006;" horiz-adv-x="265" />
<glyph unicode="&#x2007;" horiz-adv-x="265" />
<glyph unicode="&#x2008;" horiz-adv-x="198" />
<glyph unicode="&#x2009;" horiz-adv-x="318" />
<glyph unicode="&#x200a;" horiz-adv-x="88" />
<glyph unicode="&#x2010;" horiz-adv-x="674" d="M23 393l63 312h553l-64 -312h-552z" />
<glyph unicode="&#x2011;" horiz-adv-x="674" d="M23 393l63 312h553l-64 -312h-552z" />
<glyph unicode="&#x2012;" horiz-adv-x="674" d="M23 393l63 312h553l-64 -312h-552z" />
<glyph unicode="&#x2013;" horiz-adv-x="983" d="M33 416l57 274h871l-60 -274h-868z" />
<glyph unicode="&#x2014;" horiz-adv-x="1966" d="M33 416l57 274h1854l-60 -274h-1851z" />
<glyph unicode="&#x2018;" horiz-adv-x="500" d="M109 983q104 235 258 479h288q-26 -62 -53 -131t-135 -370h-348z" />
<glyph unicode="&#x2019;" horiz-adv-x="500" d="M94 961q34 81 67.5 167.5t121.5 333.5h348l8 -22q-92 -212 -256 -479h-289z" />
<glyph unicode="&#x201c;" horiz-adv-x="997" d="M109 983q104 235 258 479h288q-26 -62 -53 -131t-135 -370h-348zM606 983q109 246 256 479h289q-49 -115 -100 -258l-88 -243h-349z" />
<glyph unicode="&#x201d;" horiz-adv-x="997" d="M94 961q49 117 100 258l89 243h348l8 -22q-92 -212 -256 -479h-289zM592 961q41 98 99 258l89 243h348l7 -22q-39 -91 -110 -226t-144 -253h-289z" />
<glyph unicode="&#x2022;" horiz-adv-x="803" d="M86 688q0 118 47 214t133.5 150t200.5 54q148 0 221.5 -77.5t73.5 -223.5q0 -194 -101.5 -305t-281.5 -111q-137 0 -215 80t-78 219zM594 1133z" />
<glyph unicode="&#x2026;" horiz-adv-x="1800" d="M12 127q0 109 65 171t179 62q84 0 132 -40t48 -115q0 -118 -60 -174t-190 -56q-78 0 -126 37t-48 115zM600 127q0 109 65 171t179 62q84 0 132 -40t48 -115q0 -118 -60 -174t-190 -56q-78 0 -126 37t-48 115zM1186 127q0 109 65 171t179 62q84 0 132 -40t48 -115 q0 -118 -60 -174t-190 -56q-78 0 -126 37t-48 115z" />
<glyph unicode="&#x202f;" horiz-adv-x="318" />
<glyph unicode="&#x205f;" horiz-adv-x="397" />
<glyph unicode="&#x20ac;" d="M53 451l43 204h109l22 123h-106l47 205h117q84 243 243 373.5t377 130.5q115 0 202 -25t173 -80l-154 -282q-120 78 -221 78q-142 0 -219 -195h297l-45 -205h-309q-18 -59 -25 -123h246l-43 -204h-227q0 -82 27.5 -113t105.5 -31q75 0 145 18.5t148 49.5v-330 q-126 -65 -355 -65q-231 0 -341.5 114t-116.5 357h-140z" />
<glyph unicode="&#x2122;" horiz-adv-x="1577" d="M102 1286v176h537v-176h-170v-545h-197v545h-170zM711 741v721h286l138 -479l149 479h277v-721h-195v400q0 74 6 110h-8l-152 -510h-163l-144 510h-8q6 -64 6 -110v-400h-192z" />
<glyph unicode="&#xe000;" horiz-adv-x="1135" d="M0 1135h1135v-1135h-1135v1135z" />
</font>
</defs></svg>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
// ------------------------------
// edX Patern Library Elements: Shared Build Compile
// About: Sass compile for the edX Patern Library Elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
// ------------------------------
// #UTILITIES
// ------------------------------
@import 'utilities/functions';
@import 'utilities/variables';
@import 'utilities/mixins';
@import 'utilities/helpers';
// ------------------------------
// #BASE
// ------------------------------
@import 'base/normalize';
@import 'base/reset';
@import 'base/typography';
// ------------------------------
// #COMPONENTS
// ------------------------------
@import 'components/headings';
@import 'components/copy';
@import 'components/colors';
@import 'components/buttons';
// ------------------------------
// #LAYOUTS
// ------------------------------
// TBD
// ------------------------------
// #VIEWS
// ------------------------------
// TBD
// ------------------------------
// #SHAME
// ------------------------------
// TBD
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
// ------------------------------
// edX Pattern Library: Reset
// About: Sass partial for resetting and setting base elements.
// #GLOBAL: Global overrides and resets
// #BASE: Base overrides and resets
// #FORMS: Form-focused overrides and resets
// #ACTIONS: links, buttons, controls overrides and resets
// #MEDIA: images, video, mutlmedia overrides and resets
// #UTILITIES: layout and use case utilities
// ----------------------------
// #GLOBAL
// ----------------------------
* {
box-sizing: border-box;
}
// ----------------------------
// #BASE
// ----------------------------
html, body {
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
body {
@include font-smoothing(on);
color: $text-base-color;
background: $view-bg;
font-size: font-size(base);
font-family: $font-family-sans-serif;
}
p,
ol,
ul,
dl {
margin: 0 0 spacing-vertical(small) 0;
}
// ----------------------------
// #FORMS
// ----------------------------
fieldset {
margin: 0;
border: 0;
padding: 0;
}
textarea {
resize: vertical;
}
// ----------------------------
// #ACTIONS
// ----------------------------
a,
.link {
@extend %link;
}
// ----------------------------
// #MEDIA
// ----------------------------
figure {
display: inline-block;
margin: 0;
padding: 0;
img {
display: block;
}
figcaption {
}
}
// images
.img,
picture {
max-width: 100%;
margin: 0;
}
pre {
font-family: $font-family-monospace;
margin: 0;
}
// ----------------------------
// #UTILITIES
// ----------------------------
.sr-only {
@extend %a11y-hide;
}
.bg-replace {
@extend %a11y-hide-image-text;
}
[class^='wrapper'] {
@extend %wrapper;
}
// ------------------------------
// edX Pattern Library: Typography
// About: Sass partial for basic typography rules and settings
// #HEADINGS
// #COPY
// #METADATA
// ----------------------------
// #HEADINGS
// ----------------------------
h1, h2, h3, h4, h5, h6 {
@extend %reset-headings;
}
h1 {
font-size: font-size(xx-large);
}
h2 {
font-size: font-size(x-large);
}
h3 {
font-size: font-size(large);
}
h4 {
font-size: font-size(mid-large);
}
h5 {
font-size: font-size(base);
}
h6 {
font-size: font-size(small);
}
// ----------------------------
// #COPY
// ----------------------------
.copy,
p, ol, ul, dl, td, th {
@extend %reset-copy;
}
// ----------------------------
// #METADATA
// ----------------------------
// ------------------------------
// edX Pattern Library: Components - Buttons
// About: Contains base styling for demonstration and utility for buttons.
// ----------------------------
// #LAYOUT
// #GLOBALS
// #BASE (size)
// #LARGE (size)
// #SMALL (size)
// #DEFAULT (style)
// #PRIMARY (style)
// #SECONDARY (style)
// #LINK (style)
// #ELEVATED (type)
// #ELEVATED-ALT (type)
// #COMBO (type)
// #ICONS (type)
// #OVERLAY (type)
// ----------------------------
// ----------------------------
// #GLOBALS
// ----------------------------
.btn {
@include transition(
color timing(xx-fast) ease-in-out 0s,
border-color timing(xx-fast) ease-in-out 0s,
background timing(xx-fast) ease-in-out 0s,
box-shadow timing(xx-fast) ease-in-out 0s
);
// Display: inline, side-by-side
display: inline-block;
border-style: $buttons-border-style;
border-radius: $buttons-border-radius;
border-width: $buttons-border-size;
font-weight: $buttons-font-weight;
// Display: block, one button per line, full width
&.block {
display: block;
width: 100%;
}
// STATE: is disabled
&:disabled,
&.is-disabled {
@extend %state-disabled;
}
}
// ----------------------------
// #BASE
// ----------------------------
.btn-base {
padding: spacing-vertical(x-small) spacing-horizontal(base);
font-size: font-size(base);
}
// ----------------------------
// #LARGE
// ----------------------------
.btn-large {
padding: spacing-vertical(small) spacing-horizontal(mid-large);
font-size: font-size(mid-large);
}
// ----------------------------
// #SMALL
// ----------------------------
.btn-small {
padding: spacing-vertical(x-small) spacing-horizontal(small);
font-size: font-size(small);
}
// ----------------------------
// #DEFAULT
// ----------------------------
.btn-default {
border-color: palette(primary, base);
// background: palette(grayscale, white);
color: palette(primary, base);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background: palette(primary, base);
color: palette(grayscale, white);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
border-color: palette(primary, dark);
background: palette(primary, dark);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, light);
background: palette(grayscale, white);
color: palette(grayscale, base);
}
}
// ----------------------------
// #PRIMARY
// ----------------------------
.btn-primary {
border-color: palette(primary, base);
background: palette(primary, base);
color: palette(grayscale, white);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(primary, accent);
background: palette(primary, accent);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
border-color: palette(primary, base);
background: palette(primary, base);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, light);
background: palette(grayscale, light);
color: palette(grayscale, base);
}
}
// ----------------------------
// #SECONDARY
// ----------------------------
.btn-secondary {
border-color: $transparent;
background: $transparent;
color: palette(primary, base);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(grayscale-cool, light);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
border-color: palette(primary, base);
color: palette(primary, base);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, light);
color: palette(grayscale, light);
}
}
// ----------------------------
// #LINK
// ----------------------------
.btn-link {
@extend %link;
// reset of inherited buttons
border-radius: 0;
border-color: $transparent;
padding: 1px;
background: $transparent;
}
// ----------------------------
// #ELEVATED
// ----------------------------
.btn-elevated {
border-color: palette(primary, base);
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
background: palette(primary, base);
color: palette(grayscale, white);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
background: palette(primary, accent);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
background: palette(primary, dark);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, x-light);
box-shadow: inset 0 -1px 0 palette(grayscale, light);
background: palette(grayscale, x-light);
color: palette(grayscale, base);
}
}
// ----------------------------
// #ELEVATED-ALT
// ----------------------------
.btn-elevated-alt {
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(grayscale-cool, light);
border-color: palette(grayscale-cool, light);
background: $transparent;
color: palette(primary, base);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
border-color: palette(primary, base);
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, base);
color: palette(grayscale, white);
background: palette(primary, accent);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
background: palette(primary, dark);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, x-light);
box-shadow: inset 0 -1px 0 palette(grayscale, light);
background: palette(grayscale, x-light);
color: palette(grayscale, base);
}
}
// ----------------------------
// #COMBO
// ----------------------------
.btn-combo {
border-radius: 0;
// targets the first element in a parent container
&:first-of-type {
@include border-top-left-radius($buttons-border-radius);
@include border-bottom-left-radius($buttons-border-radius);
}
// targets the last element in a parent container
&:last-of-type {
@include border-top-right-radius($buttons-border-radius);
@include border-bottom-right-radius($buttons-border-radius);
}
}
// ----------------------------
// #ICONS
// ----------------------------
.has-icon {
}
.has-icon-reverse {
}
// ----------------------------
// #OVERLAY
// ----------------------------
.btn-overlay {
border-color: palette(grayscale, white);
background: $transparent;
color: palette(grayscale, white);
font-weight: font-weight(semi-bold);
// STATE: hover and focus
&:hover,
&.is-hovered,
&:focus,
&.is-focused {
background: palette(grayscale, white);
color: palette(primary, base);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
color: palette(primary, dark);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
border-color: palette(grayscale, trans);
color: palette(grayscale, x-light);
&:hover {
border-color: palette(grayscale, trans);
background: $transparent;
color: palette(grayscale, x-light);
}
}
}
// ------------------------------
// edX Pattern Library: Components - Colors
// About: Contains base styling for demonstration and utility color palette stylng.
// ----------------------------
// #SWATCH LAYOUT
// #SWATCH RENDERING
// ----------------------------
// ----------------------------
// #SWATCH LAYOUT
// ----------------------------
.example {
@include transition(all timing(x-fast) ease-in-out);
border: 1px solid palette(grayscale, x-light);
border-radius: spacing-horizontal(xx-small);
margin-bottom: spacing-vertical(mid-small);
padding: spacing-vertical(x-small) spacing-horizontal(small);
box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, xx-trans);
background: palette(grayscale, white);
color: palette(grayscale, white);
// STATE: hover, focus, and active
&:hover, &:focus, &:active {
@include transform(scale(1.05));
box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, x-trans);
}
}
.swatch-color {
display: block;
margin-bottom: spacing-vertical(x-small);
padding: spacing-vertical(mid-large) spacing-horizontal(mid-small);
@include text-align(center);
.color-class {
font-size: font-size(small);
text-transform: lowercase;
// CASE: light text on dark bg
&.lod {
color: palette(grayscale, white);
}
// CASE: dark text on light bg
&.dol {
color: palette(grayscale, black);
}
}
// CASE: base color
&.base {
.color-class {
font-weight: font-weight(bold);
}
}
}
.swatch-meta {
padding: spacing-vertical(xx-small) spacing-horizontal(small);
white-space: nowrap;
font-size: font-size(small);
@include text-align(center);
color: palette(grayscale, dark);
.color-rgb {
@include ellipsis();
}
}
// ----------------------------
// #SWATCH RENDERING
// ----------------------------
.brand-primary {
&.base {
background: palette(primary, base);
}
&.light {
background: palette(primary, light);
}
&.x-light {
background: palette(primary, x-light);
}
&.dark {
background: palette(primary, dark);
}
&.x-dark {
background: palette(primary, x-dark);
}
&.accent {
background: palette(primary, accent);
}
&.x-accent {
background: palette(primary, x-accent);
}
}
.brand-secondary {
background: palette(secondary, base);
&.base {
background: palette(secondary, base);
}
&.light {
background: palette(secondary, light);
}
&.x-light {
background: palette(secondary, x-light);
}
&.dark {
background: palette(secondary, dark);
}
&.x-dark {
background: palette(secondary, x-dark);
}
&.accent {
background: palette(secondary, accent);
}
}
.grayscale {
background: palette(grayscale, base);
&.base {
background: palette(grayscale, base);
}
&.light {
background: palette(grayscale, light);
}
&.x-light {
background: palette(grayscale, x-light);
}
&.white {
background: palette(grayscale, white);
}
&.white-t {
background: palette(grayscale, white-t);
}
&.dark {
background: palette(grayscale, dark);
}
&.x-dark {
background: palette(grayscale, x-dark);
}
&.black {
background: palette(grayscale, black);
}
&.black-t {
background: palette(grayscale, black-t);
}
&.trans {
background: palette(grayscale, trans);
}
&.x-trans {
background: palette(grayscale, x-trans);
}
&.xx-trans {
background: palette(grayscale, xx-trans);
}
}
.grayscale-cool {
background: palette(grayscale-cool, base);
&.base {
background: palette(grayscale-cool, base);
}
&.light {
background: palette(grayscale-cool, light);
}
&.x-light {
background: palette(grayscale-cool, x-light);
}
&.dark {
background: palette(grayscale-cool, dark);
}
&.x-dark {
background: palette(grayscale-cool, x-dark);
}
&.trans {
background: palette(grayscale-cool, trans);
}
&.x-trans {
background: palette(grayscale-cool, x-trans);
}
&.xx-trans {
background: palette(grayscale-cool, xx-trans);
}
}
.success {
background: palette(success, base);
&.base {
background: palette(success, base);
}
&.light {
background: palette(success, light);
}
&.dark {
background: palette(success, dark);
}
}
.warning {
background: palette(warning, base);
&.base {
background: palette(warning, base);
}
&.light {
background: palette(warning, light);
}
&.dark {
background: palette(warning, dark);
}
}
.error {
background: palette(error, base);
&.base {
background: palette(error, base);
}
&.light {
background: palette(error, light);
}
&.dark {
background: palette(error, dark);
}
}
// ------------------------------
// edX Pattern Library: Components - Copy
// About: Contains base styling for copy (general text and type used in content and functionaly).
// #GLOBAL
// #INDIVIDUAL COPY CASES
// ----------------------------
// #GLOBAL
// ----------------------------
.copy {
color: $text-base-color;
&.emphasized {
color: $text-emphasized-color;
font-weight: $text-emphasized-font-weight;
}
&.de-emphasized {
color: $text-de-emphasized-color;
font-weight: $text-de-emphasized-font-weight;
}
}
// ----------------------------
// #INDIVIDUAL COPY CASES
// ----------------------------
// archetypes
%copy-lead {
font-size: font-size(large);
line-height: line-height(mid-large);
p,
ol,
ul,
dl {
margin-bottom: spacing-vertical(mid-small);
}
}
%copy-large {
font-size: font-size(mid-large);
line-height: line-height(mid-large);
p,
ol,
ul,
dl {
margin-bottom: spacing-vertical(small);
}
}
%copy-base {
font-size: font-size(base);
line-height: line-height(mid-large);
p,
ol,
ul,
dl {
margin-bottom: spacing-vertical(small);
}
}
%copy-meta {
font-size: font-size(small);
line-height: line-height(mid-large);
p,
ol,
ul,
dl {
margin-bottom: spacing-vertical(small);
}
}
%copy-micro {
font-size: font-size(x-small);
line-height: line-height(small);
p,
ol,
ul,
dl {
margin-bottom: spacing-vertical(small);
}
}
// application of archetypes
.copy-lead {
@extend %copy-lead;
}
.copy-large {
@extend %copy-large;
}
.copy-base {
@extend %copy-base;
}
.copy-meta {
@extend %copy-meta;
}
.copy-micro {
@extend %copy-micro;
}
// ------------------------------
// edX Pattern Library: Components - Headings
// About: Contains base styling for headings (leading type for sections of content and UI).
// #GLOBAL
// #INDIVIDUAL HEADINGS
// ----------------------------
// #GLOBAL
// ----------------------------
.hd-1,
.hd-2,
.hd-3,
.hd-4,
.hd-5,
.hd-6 {
@extend %reset-headings;
&.emphasized {
color: $headings-primary-color;
font-weight: $headings-font-weight-bold;
}
&.de-emphasized {
color: $headings-secondary-color;
}
}
.hd-6,
.hd-7 {
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
&.emphasized {
font-weight: $headings-font-weight-x-bold;
}
}
// ----------------------------
// #INDIVIDUAL HEADINGS
// ----------------------------
// Level one heading
.hd-1 {
margin-bottom: spacing-vertical(small);
font-size: font-size(xxx-large);
line-height: line-height(xx-large);
}
// Level two heading
.hd-2 {
margin-bottom: spacing-vertical(small);
font-size: font-size(xx-large);
line-height: line-height(x-large);
}
// Level three heading
.hd-3 {
margin-bottom: spacing-vertical(x-small);
font-size: font-size(x-large);
line-height: line-height(large);
&.de-emphasized {
color: palette(grayscale, base);
}
}
// Level four heading
.hd-4 {
margin-bottom: spacing-vertical(x-small);
font-weight: font-weight(semi-bold);
font-size: font-size(large);
line-height: line-height(mid-small);
}
// Level five heading
.hd-5 {
margin-bottom: spacing-vertical(x-small);
font-weight: font-weight(bold);
font-size: font-size(mid-large);
line-height: line-height(mid-large);
}
// Level six heading
.hd-6 {
margin-bottom: spacing-vertical(x-small);
font-size: font-size(small);
line-height: line-height(mid-small);
}
// Level seven heading
.hd-7 {
margin-bottom: spacing-vertical(x-small);
font-size: font-size(x-small);
line-height: line-height(small);
}
// ------------------------------
// edX Patern Library Elements: Main Style Compile
// About: Sass compile for the edX Patern Library Elements. This does not contain styles for other edX products/experiences (e.g. account/onboarding), nor does it contain styling for the Pattern Library Site
// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
// ------------------------------
// #VENDOR
// ------------------------------
@import '../../vendor/bourbon/bourbon';
@import '../../vendor/bi-app/bi-app-ltr'; // LTR support
// ------------------------------
// #UTILITIES
// ------------------------------
@import 'utilities/variables-ltr';
// ------------------------------
// #BUILD
// ------------------------------
@import 'build'; // shared compile/build order for both LTR and RTL UI
// ------------------------------
// edX Patern Library Elements: Main Style Compile
// ABOUT: Sass compile for the edX Patern Library Elements. This does not contain styles for other edX products/experiences (e.g. account/onboarding), nor does it contain styling for the Pattern Library Site
// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
// ------------------------------
// #VENDOR
// ------------------------------
@import '../../vendor/bourbon/bourbon';
@import '../../vendor/bi-app/bi-app-rtl'; // RTL support
// ------------------------------
// #UTILITIES
// ------------------------------
@import 'utilities/variables-rtl';
// ------------------------------
// #BUILD
// ------------------------------
@import 'build'; // shared compile/build order for both LTR and RTL UI
// ------------------------------
// edX Pattern Library: Functions
// About: Sass partial for defining Sass helper functions.
// #FUNCTIONS
// ----------------------------
// FUNCTIONS
// ----------------------------
// get colors from defined palettes map values
@function palette($palette, $tone: 'base') {
@return map-get(map-get($palettes, $palette), $tone);
}
// get font sizes from defined map values
@function font-size($key) {
@if map-has-key($font-sizes, $key) {
@return rem(map-get($font-sizes, $key));
}
@warn "Unknown `#{$key}` in $font-sizes.";
@return null;
}
// get line-heights from defined map values
@function line-height($key) {
@if map-has-key($line-heights, $key) {
@return map-get($line-heights, $key);
}
@warn "Unknown `#{$key}` in $line-heights.";
@return null;
}
// get font sizes from defined map values
@function font-weight($key) {
@if map-has-key($font-weights, $key) {
@return map-get($font-weights, $key);
}
@warn "Unknown `#{$key}` in $font-weights.";
@return null;
}
// get letter spacing from defined map values
@function letter-spacing($key) {
@if map-has-key($letter-spacing, $key) {
@return map-get($letter-spacing, $key);
}
@warn "Unknown `#{$key}` in $letter-spacing.";
@return null;
}
// get z-indexes from defined map values
@function z-index($key) {
@if map-has-key($z-depths, $key) {
@return map-get($z-depths, $key);
}
@warn "Unknown `#{$key}` in $z-depths.";
@return null;
}
// get timing from defined map values
@function timing($key) {
@if map-has-key($timing, $key) {
@return map-get($timing, $key);
}
@warn "Unknown `#{$key}` in $z-depths.";
@return null;
}
// get vertical spacings from defined map values
@function spacing-vertical($key) {
@if map-has-key($spacing-vertical, $key) {
@return rem(map-get($spacing-vertical, $key));
}
@warn "Unknown `#{$key}` in $spacing-vertical.";
@return null;
}
// get horizontal spacings from defined map values
@function spacing-horizontal($key) {
@if map-has-key($spacing-horizontal, $key) {
@return rem(map-get($spacing-horizontal, $key));
}
@warn "Unknown `#{$key}` in $spacing-horizontal.";
@return null;
}
// ------------------------------
// edX Pattern Library: Helpers
// About: Sass partial for defining extends and re-usable elements at the Sass compile level.
// #UTILITIES
// #RESETS
// ----------------------------
// #UTILITIES
// ----------------------------
// visual disabled
%state-disabled {
pointer-events: none;
outline: none;
cursor: default;
}
// presentational wrapper
%wrapper {
@include clearfix();
width: 100%;
}
// remove spacing from first/last children
%clear-first-child {
&:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
}
%clear-last-child {
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
// accessibility
%a11y-hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
%a11y-hide-image-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
// ----------------------------
// #UTILITIES
// ----------------------------
// reset of lists
%reset-lists {
margin: 0;
padding: 0;
list-style: none;
text-indent: 0;
}
%list-unstyled {
@extend %reset-lists;
li,
dt,
dd {
margin: 0;
padding: 0;
}
}
%list-inline {
@extend %list-unstyled;
li,
dt,
dd {
display: inline-block;
}
}
// reset of typography
%reset-headings {
margin: 0 0 spacing-horizontal(base) 0;
font-family: $headings-base-font-family;
font-weight: $headings-base-font-weight;
font-size: font-size(base);
line-height: line-height(base);
color: $headings-base-color;
}
// reset of copy
%reset-copy {
font-family: $text-base-font-family;
}
// reset of code
%reset-code {
font-family: $font-family-monospace;
font-size: font-size(base);
line-height: line-height(large);
color: $text-base-color;
}
// reset of links
%link {
@include transition(
color timing(xx-fast) ease-in-out 0s,
border-color timing(xx-fast) ease-in-out 0s
);
border-bottom: 1px solid $transparent;
color: palette(primary, base);
text-decoration: none;
// STATE: hover, active, focus
&:hover,
&:active,
&:focus {
border-bottom-color: palette(primary, accent);
color: palette(primary, accent);
}
// STATE: is disabled
&:disabled,
&.is-disabled {
display: none; // :)
color: palette(grayscale, light);
}
// STATE: is pressed or active
&:active,
&.is-pressed,
&.is-active {
color: palette(primary, dark);
}
}
// ------------------------------
// edX Pattern Library: Mixins
// About: Sass partial containing mixins and functions for use within the application.
// #MIXINS
// ------------------------------
// #MIXINS
// ------------------------------
@mixin font-smoothing($value: on) {
@if $value == on {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@else {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
}
// ------------------------------
// edX Pattern Library: Variables (LTR-centric)
// grid - configuration (susy-based)
$susy: (
flow: ltr,
);
// ------------------------------
// edX Pattern Library: Variables (RTL-centric)
// grid - configuration (susy-based)
$susy: (
flow: rtl,
);
// ------------------------------
// edX Pattern Library: Variables
// About: Sass partial for defining variables used throughout the applications.
// #UNITS: Basic units of measurement
// #GRID: Grid and layout variables
// #COLORS: Base, palette and theme color definitions + application
// #TYPOGRAPHY: Font definitions and scales
// #DEPTH: Event timing variables
// #TIMING: Event timing variables
// #APPLICATIONS: Applying configuration
// ----------------------------
// #UNITS
// ----------------------------
$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)
$static-path: '..' !default;
// ----------------------------
// #GRID
// ----------------------------
// grid - baseline
$baseline: 20;
$baseline-vertical: ($baseline*2);
$baseline-horizontal: $baseline;
$susy: (
use-custom clearfix: true,
global-box-sizing: border-box,
math: fluid,
output: float,
columns: 12,
gutters: .5,
container: rem(1170),
);
// grid - breakpoints
$bp-small: 320px;
$bp-medium: 768px;
$bp-large: 1024px;
$bp-huge: 1280px;
// ----------------------------
// #COLORS
// ----------------------------
// color: config
$transparent: rgba(0, 0, 0, 0);
$gray: rgb(167, 164, 164);
$gray-cool: rgb(158, 177, 185);
$red: rgb(178, 6, 16);
$yellow: rgb(253, 188, 86);
$green: rgb(37, 184, 90);
$blue: rgb(0, 121, 188);
$pink: rgb(203, 89, 141);
// colors: brand
$brand-primary: $blue;
$brand-primary-accent: rgb(14, 166, 236);
$brand-secondary: $pink;
$brand-secondary-accent: rgb(242, 108, 170);
// colors: utilities
$success: $green;
$warning: $yellow;
$error: $red;
// colors: palettes
$palettes: (
primary: (
base: $brand-primary,
light: tint($brand-primary, 30%),
x-light: tint($brand-primary, 70%),
dark: shade($brand-primary, 30%),
x-dark: shade($brand-primary, 55%),
accent: $brand-primary-accent,
x-accent: saturate($brand-primary-accent, 25%)
),
secondary: (
base: $brand-secondary,
light: tint($brand-secondary, 30%),
x-light: tint($brand-secondary, 70%),
dark: shade($brand-secondary, 30%),
x-dark: shade($brand-secondary, 55%),
accent: $brand-secondary-accent
),
grayscale: (
base: $gray,
light: tint($gray, 50%),
x-light: tint($gray, 75%),
white: tint($gray, 97%),
white-t: tint($gray, 100%),
dark: shade($gray, 40%),
x-dark: shade($gray, 60%),
black: shade($gray, 90%),
black-t: shade($gray, 100%),
trans: transparentize($gray, 0.50),
x-trans: transparentize($gray, 0.75),
xx-trans: transparentize($gray, 0.95)
),
grayscale-cool: (
base: $gray-cool,
light: tint($gray-cool, 50%),
x-light: tint($gray-cool, 75%),
dark: shade($gray-cool, 50%),
x-dark: shade($gray-cool, 75%),
trans: transparentize($gray-cool, 0.50),
x-trans: transparentize($gray-cool, 0.75),
xx-trans: transparentize($gray-cool, 0.95)
),
success: (
base: $success,
light: tint($success, 33%),
dark: shade($success, 33%)
),
error: (
base: $error,
light: tint($error, 33%),
dark: shade($error, 33%)
),
warning: (
base: $warning,
light: tint($warning, 33%),
dark: shade($warning, 33%)
),
);
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
// typography: config
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-Light-webfont',
300,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-LightItalic-webfont',
300,
italic,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-Regular-webfont',
400,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-Italic-webfont',
400,
italic,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-Semibold-webfont',
600,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-SemiboldItalic-webfont',
600,
italic,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-Bold-webfont',
700,
$file-formats: woff woff2 ttf
);
@include font-face(
'Open Sans',
'#{$static-path}/../fonts/OpenSans/OpenSans-BoldItalic-webfont',
700,
italic,
$file-formats: woff woff2 ttf
);
// typography: config - stacks
$font-family-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// typography: config - scale
$modular-scale-ratio: $perfect-fourth;
// typography: sizes
$font-sizes: (
xxx-large: 38,
xx-large: 28,
x-large: 24,
large: 21,
mid-large: 18,
base: 16,
small: 14,
x-small: 12,
);
// typography: line-height
$line-heights: (
xx-large: 1.40,
x-large: 1.40,
large: 1.50,
mid-large: 1.60,
mid-small: 1.60,
small: 1.5,
base: 1.5,
none: 0
);
// typography: weights
$font-weights: (
normal: 400,
light: 300,
x-light: 200,
semi-bold: 600,
bold: 700,
x-bold: 800
);
// typography: letter-spacing
$letter-spacing: (
normal: 0,
xx-tight: -3,
x-tight: -2,
tight: -.095,
loose: -.075,
x-loose: -.025,
xx-loose: 3
);
// ----------------------------
// #DEPTH
// ----------------------------
$z-depths: (
base: 1,
mid-back: -10,
back: -100,
very-back: -1000,
mid-front: 10,
front: 100,
very-front: 1000
);
$spacing-vertical: (
base: $baseline-vertical,
mid-small: ($baseline-vertical*0.75),
small: ($baseline-vertical/2),
x-small: ($baseline-vertical/4),
xx-small: ($baseline-vertical/8),
mid-large: ($baseline-vertical*1.5),
large: ($baseline-vertical*2),
x-large: ($baseline-vertical*4)
);
$spacing-horizontal: (
base: $baseline-horizontal,
mid-small: ($baseline-horizontal*0.75),
small: ($baseline-horizontal/2),
x-small: ($baseline-horizontal/4),
xx-small: ($baseline-horizontal/8),
mid-large: ($baseline-horizontal*1.5),
large: ($baseline-horizontal*2),
x-large: ($baseline-horizontal*4)
);
// ----------------------------
// #TIMING
// ----------------------------
$timing: (
base: 0.75s,
slow: 1s,
x-slow: 1.5s,
fast: 0.5s,
x-fast: 0.25s,
xx-fast: 0.125s
);
// ----------------------------
// #APPLICATIONS
// ----------------------------
// scaffolding
$view-bg: palette(grayscale, xx-light);
// base component settings
$component-focus-color: inherit;
$component-focus-bg: palette(primary, x-light);
$component-active-color: palette(grayscale, white);
$component-active-bg: palette(primary, base);
// base text settings
$text-base-font-family: $font-family-sans-serif;
$text-base-color: palette(grayscale, dark);
$text-base-font-weight: font-weight(normal);
$text-base-focus-color: palette(grayscale, x-dark);
$text-emphasized-color: palette(grayscale, x-dark);
$text-emphasized-font-weight: font-weight(normal);
$text-de-emphasized-color: palette(grayscale, base);
$text-de-emphasized-font-weight: font-weight(normal);
// links
$link-color: palette(primary, base);
$link-focus-color: palette(primary, sat);
$link-visited-color: palette(primary, dark);
// headings
$headings-font-weight-normal: font-weight(normal);
$headings-font-weight-bold: font-weight(semi-bold);
$headings-font-weight-x-bold: font-weight(bold);
$headings-base-font-family: $font-family-sans-serif;
$headings-base-font-weight: $headings-font-weight-normal;
$headings-base-color: palette(grayscale, x-dark);
$headings-primary-font-family: $font-family-sans-serif;
$headings-primary-color: palette(grayscale, black);
$headings-secondary-font-family: $font-family-sans-serif;
$headings-secondary-color: palette(grayscale, base);
// buttons
$buttons-border-style: solid;
$buttons-border-size: 1px;
$buttons-elevated-shadow: 3px;
$buttons-border-radius: 3px;
$buttons-font-weight: font-weight(semi-bold);
// tables
$table-cell-padding: spacing-vertical(small) spacing-horizontal(small);
$table-condensed-cell-padding: spacing-vertical(x-small) spacing-horizontal(x-small);
$table-bg: palette(grayscale, white);
$table-accent-bg: palette(primary, accent);
$table-focus-bg: $component-focus-bg;
$table-active-bg: $component-active-bg;
$table-border-color: palette(grayscale, x-light);
// ------------------------------------------
// left to right module
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
@import 'variables-ltr';
@import 'mixins';
// ------------------------------------------
// right to left module
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
@import 'variables-rtl';
@import 'mixins';
// ------------------------------------------
// bi app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// ------------------------------------------
// Table of contents
// ------------------------------------------
// padding
// margin
// float
// text align
// clear
// left / right
// border
// - width
// - style
// - color
// - generic
// - radius
// ltr / rtl contents
// ------------------------------------------
// generic mixin for properties with values
// (top right bottom left)
// ------------------------------------------
@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
@if $bi-app-direction == ltr {
#{$property}: $top $right $bottom $left;
} @else {
#{$property}: $top $left $bottom $right;
}
}
// padding
// ------------------------------------------
@mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
@mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
@mixin padding($top, $right, $bottom, $left) {
@include bi-app-compact(padding, $top, $right, $bottom, $left);
}
// margin
// ------------------------------------------
@mixin margin-left($distance) {
margin-#{$bi-app-left}: $distance;
}
@mixin margin-right($distance) {
margin-#{$bi-app-right}: $distance;
}
@mixin margin($top, $right, $bottom, $left) {
@include bi-app-compact(margin, $top, $right, $bottom, $left);
}
// float
// ------------------------------------------
@mixin bi-app-float-left {
float: $bi-app-left;
}
@mixin bi-app-float-right {
float: $bi-app-right;
}
@mixin float($direction) {
@if $direction == left {
@include bi-app-float-left;
} @else if $direction == right {
@include bi-app-float-right;
} @else {
float: $direction;
}
}
// text align
// ------------------------------------------
@mixin bi-app-text-align-left {
text-align: $bi-app-left;
}
@mixin bi-app-text-align-right {
text-align: $bi-app-right;
}
@mixin text-align($direction) {
@if $direction == left {
@include bi-app-text-align-left;
} @else if $direction == right {
@include bi-app-text-align-right;
} @else {
text-align: $direction;
}
}
// clear
// ------------------------------------------
@mixin bi-app-clear-left {
clear: $bi-app-left;
}
@mixin bi-app-clear-right {
clear: $bi-app-right;
}
@mixin clear($direction) {
@if $direction == left {
@include bi-app-clear-left;
} @else if $direction == right {
@include bi-app-clear-right;
} @else {
clear: $direction;
}
}
// left / right
// ------------------------------------------
@mixin left($distance) {
@if $bi-app-direction == ltr {
left: $distance;
} @else if $bi-app-direction == rtl {
right: $distance;
}
}
@mixin right($distance) {
@if $bi-app-direction == ltr {
right: $distance;
} @else if $bi-app-direction == rtl {
left: $distance;
}
}
// border
// ------------------------------------------
// width
@mixin border-left-width($width) {
border-#{$bi-app-left}-width: $width;
}
@mixin border-right-width($width) {
border-#{$bi-app-right}-width: $width;
}
@mixin border-width($top, $right, $bottom, $left) {
@include bi-app-compact(border-width, $top, $right, $bottom, $left);
}
// style
@mixin border-left-style($style) {
border-#{$bi-app-left}-style: $style;
}
@mixin border-right-style($style) {
border-#{$bi-app-right}-style: $style;
}
@mixin border-style($top, $right, $bottom, $left) {
@include bi-app-compact(border-style, $top, $right, $bottom, $left);
}
// color
@mixin border-left-color($color) {
border-#{$bi-app-left}-color: $color;
}
@mixin border-right-color($color) {
border-#{$bi-app-right}-color: $color;
}
@mixin border-color($top, $right, $bottom, $left) {
@include bi-app-compact(border-color, $top, $right, $bottom, $left);
}
// generic
@mixin border-left($border-style) {
border-#{$bi-app-left}: $border-style;
}
@mixin border-right($border-style) {
border-#{$bi-app-right}: $border-style;
}
// radius
@mixin border-top-left-radius($radius) {
-webkit-border-top-#{$bi-app-left}-radius: $radius;
-moz-border-top#{$bi-app-left}-radius: $radius;
border-top-#{$bi-app-left}-radius: $radius;
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-#{$bi-app-right}-radius: $radius;
-moz-border-top#{$bi-app-right}-radius: $radius;
border-top-#{$bi-app-right}-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-#{$bi-app-left}-radius: $radius;
-moz-border-bottom#{$bi-app-left}-radius: $radius;
border-bottom-#{$bi-app-left}-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-#{$bi-app-right}-radius: $radius;
-moz-border-bottom#{$bi-app-right}-radius: $radius;
border-bottom-#{$bi-app-right}-radius: $radius;
}
@mixin border-right-radius($radius) {
@include border-top-right-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-left-radius($radius) {
@include border-top-left-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin border-top-radius($radius) {
@include border-top-left-radius($radius);
@include border-top-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
@include border-bottom-left-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
@if $topRight != null {
@include border-top-left-radius($topLeft);
@include border-top-right-radius($topRight);
@include border-bottom-right-radius($bottomRight);
@include border-bottom-left-radius($bottomLeft);
} @else {
-webkit-border-radius: $topLeft;
-moz-border-radius: $topLeft;
-ms-border-radius: $topLeft;
-o-border-radius: $topLeft;
border-radius: $topLeft;
}
}
// Returns "en" or "ar", useful for image suffixes.
// Usage: background-image: url(/img/header-#{lang()}.png);
@function lang() {
@if $bi-app-direction == ltr {
@return 'en';
} @else {
@return 'ar';
}
}
// Support for "direction" declaration (renders ltr/rtl).
// Useful for form elements as they swap the text-indent property and align the text accordingly.
@mixin direction {
direction: $bi-app-direction;
}
// Inverts a percentage value. Example: 97% becames 3%.
// Useful for background-position.
@function bi-app-invert-percentage($percentage) {
@if $bi-app-direction == rtl {
@return 100% - $percentage;
} @else {
@return $percentage;
}
}
// ltr / rtl contents
// ------------------------------------------
@mixin ltr {
@if $bi-app-direction == ltr {
@content;
}
}
@mixin rtl {
@if $bi-app-direction == rtl {
@content;
}
}
// ------------------------------------------
// left to right variables to be used by bi-app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// namespacing variables with bi-app to
// avoid conflicting with other global variables
$bi-app-left : left;
$bi-app-right : right;
$bi-app-direction : ltr;
$bi-app-invert-direction: rtl;
// ------------------------------------------
// right to left variables to be used by bi-app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// namespacing variables with bi-app to
// avoid conflicting with other global variables
$bi-app-left : right;
$bi-app-right : left;
$bi-app-direction : rtl;
$bi-app-invert-direction: ltr;
// The following features have been deprecated and will be removed in the next MAJOR version release
@mixin inline-block {
display: inline-block;
@warn "The inline-block mixin is deprecated and will be removed in the next major version release";
}
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
@if type-of($style) == string and type-of($base-color) == color {
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == string and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: #4294f0;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == color {
$base-color: $style;
$style: simple;
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == color and type-of($base-color) == number {
$padding: $text-size;
$text-size: $base-color;
$base-color: $style;
$style: simple;
@if $padding == inherit {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
@if type-of($style) == number {
$padding: $base-color;
$text-size: $style;
$base-color: #4294f0;
$style: simple;
@if $padding == #4294f0 {
$padding: 7px 18px;
}
@include buttonstyle($style, $base-color, $text-size, $padding);
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
@warn "The button mixin is deprecated and will be removed in the next major version release";
}
// Selector Style Button
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
// Grayscale button
@if $type == simple and $b-color == grayscale($b-color) {
@include simple($b-color, true, $t-size, $pad);
}
@if $type == shiny and $b-color == grayscale($b-color) {
@include shiny($b-color, true, $t-size, $pad);
}
@if $type == pill and $b-color == grayscale($b-color) {
@include pill($b-color, true, $t-size, $pad);
}
@if $type == flat and $b-color == grayscale($b-color) {
@include flat($b-color, true, $t-size, $pad);
}
// Colored button
@if $type == simple {
@include simple($b-color, false, $t-size, $pad);
}
@else if $type == shiny {
@include shiny($b-color, false, $t-size, $pad);
}
@else if $type == pill {
@include pill($b-color, false, $t-size, $pad);
}
@else if $type == flat {
@include flat($b-color, false, $t-size, $pad);
}
}
// Simple Button
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
}
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
@if $grayscale == true {
$border-active: grayscale($border-active);
$inset-shadow-active: grayscale($inset-shadow-active);
}
border: 1px solid $border-active;
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
}
}
// Shiny Button
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border: grayscale($border);
$border-bottom: grayscale($border-bottom);
$fourth-stop: grayscale($fourth-stop);
$inset-shadow: grayscale($inset-shadow);
$second-stop: grayscale($second-stop);
$text-shadow: grayscale($text-shadow);
$third-stop: grayscale($third-stop);
}
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
border: 1px solid $border;
border-bottom: 1px solid $border-bottom;
border-radius: 5px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
&:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
@if $grayscale == true {
$first-stop-hover: grayscale($first-stop-hover);
$second-stop-hover: grayscale($second-stop-hover);
$third-stop-hover: grayscale($third-stop-hover);
$fourth-stop-hover: grayscale($fourth-stop-hover);
}
@include linear-gradient(top, $first-stop-hover 0%,
$second-stop-hover 50%,
$third-stop-hover 50%,
$fourth-stop-hover 100%);
cursor: pointer;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true {
$inset-shadow-active: grayscale($inset-shadow-active);
}
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
}
}
// Pill Button
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
@if $grayscale == true {
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
border-radius: 16px;
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
$text-shadow-hover: grayscale($text-shadow-hover);
}
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
background-clip: padding-box;
border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer;
text-shadow: 0 -1px 1px $text-shadow-hover;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
@if $grayscale == true {
$active-color: grayscale($active-color);
$border-active: grayscale($border-active);
$border-bottom-active: grayscale($border-bottom-active);
$inset-shadow-active: grayscale($inset-shadow-active);
$text-shadow-active: grayscale($text-shadow-active);
}
background: $active-color;
border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active;
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
// Flat Button
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$color: hsl(0, 0, 100%);
@if is-light($base-color) {
$color: hsl(0, 0, 20%);
}
background-color: $base-color;
border-radius: 3px;
border: 0;
color: $color;
display: inline-block;
font-size: $textsize;
font-weight: bold;
padding: $padding;
text-decoration: none;
background-clip: padding-box;
&:hover:not(:disabled){
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
}
background-color: $base-color-hover;
cursor: pointer;
}
&:active:not(:disabled),
&:focus:not(:disabled) {
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
@if $grayscale == true {
$base-color-active: grayscale($base-color-active);
}
background-color: $base-color-active;
cursor: pointer;
}
}
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
@warn "The flex-grid function is deprecated and will be removed in the next major version release";
}
// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
@warn "The flex-gutter function is deprecated and will be removed in the next major version release";
}
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
@warn "The grid-width function is deprecated and will be removed in the next major version release";
}
@function golden-ratio($value, $increment) {
@return modular-scale($increment, $value, $ratio: $golden);
@warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
}
@mixin box-sizing($box) {
@include prefixer(box-sizing, $box, webkit moz spec);
@warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed.";
}
// Bourbon 4.2.1
// http://bourbon.io
// Copyright 2011-2015 thoughtbot, inc.
// MIT License
@import "settings/prefixer";
@import "settings/px-to-em";
@import "settings/asset-pipeline";
@import "functions/assign-inputs";
@import "functions/contains";
@import "functions/contains-falsy";
@import "functions/is-length";
@import "functions/is-light";
@import "functions/is-number";
@import "functions/is-size";
@import "functions/px-to-em";
@import "functions/px-to-rem";
@import "functions/shade";
@import "functions/strip-units";
@import "functions/tint";
@import "functions/transition-property-name";
@import "functions/unpack";
@import "functions/modular-scale";
@import "helpers/convert-units";
@import "helpers/directional-values";
@import "helpers/font-source-declaration";
@import "helpers/gradient-positions-parser";
@import "helpers/linear-angle-parser";
@import "helpers/linear-gradient-parser";
@import "helpers/linear-positions-parser";
@import "helpers/linear-side-corner-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@import "helpers/radial-gradient-parser";
@import "helpers/render-gradients";
@import "helpers/shape-size-stripper";
@import "helpers/str-to-num";
@import "css3/animation";
@import "css3/appearance";
@import "css3/backface-visibility";
@import "css3/background";
@import "css3/background-image";
@import "css3/border-image";
@import "css3/calc";
@import "css3/columns";
@import "css3/filter";
@import "css3/flex-box";
@import "css3/font-face";
@import "css3/font-feature-settings";
@import "css3/hidpi-media-query";
@import "css3/hyphens";
@import "css3/image-rendering";
@import "css3/keyframes";
@import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/placeholder";
@import "css3/radial-gradient";
@import "css3/selection";
@import "css3/text-decoration";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
@import "addons/border-color";
@import "addons/border-radius";
@import "addons/border-style";
@import "addons/border-width";
@import "addons/buttons";
@import "addons/clearfix";
@import "addons/ellipsis";
@import "addons/font-stacks";
@import "addons/hide-text";
@import "addons/margin";
@import "addons/padding";
@import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/text-inputs";
@import "addons/timing-functions";
@import "addons/triangle";
@import "addons/word-wrap";
@import "bourbon-deprecated-upcoming";
@charset "UTF-8";
/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-left-color: #e8ae1a;
/// border-right-color: #76cd9c;
/// border-top-color: #a60b55;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-color`
@mixin border-color($vals...) {
@include directional-property(border, color, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
///
/// @param {Number} $radii
/// List of arguments
///
/// @example scss - Usage
/// .element-one {
/// @include border-top-radius(5px);
/// }
///
/// .element-two {
/// @include border-left-radius(3px);
/// }
///
/// @example css - CSS Output
/// .element-one {
/// border-top-left-radius: 5px;
/// border-top-right-radius: 5px;
/// }
///
/// .element-two {
/// border-bottom-left-radius: 3px;
/// border-top-left-radius: 3px;
/// }
///
/// @output `border-radius`
@mixin border-top-radius($radii) {
border-top-left-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-right-radius($radii) {
border-bottom-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-radius($radii) {
border-bottom-left-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-left-radius($radii) {
border-bottom-left-radius: $radii;
border-top-left-radius: $radii;
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-style(dashed null solid);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-style: solid;
/// border-top-style: dashed;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-style`
@mixin border-style($vals...) {
@include directional-property(border, style, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-width(1em null 20px);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-width: 20px;
/// border-top-width: 1em;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-width`
@mixin border-width($vals...) {
@include directional-property(border, width, $vals...);
}
@charset "UTF-8";
/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
///
/// @example scss - Usage
/// #{$all-buttons} {
/// background-color: #f00;
/// }
///
/// #{$all-buttons-focus},
/// #{$all-buttons-hover} {
/// background-color: #0f0;
/// }
///
/// #{$all-buttons-active} {
/// background-color: #00f;
/// }
///
/// @example css - CSS Output
/// button,
/// input[type="button"],
/// input[type="reset"],
/// input[type="submit"] {
/// background-color: #f00;
/// }
///
/// button:focus,
/// input[type="button"]:focus,
/// input[type="reset"]:focus,
/// input[type="submit"]:focus,
/// button:hover,
/// input[type="button"]:hover,
/// input[type="reset"]:hover,
/// input[type="submit"]:hover {
/// background-color: #0f0;
/// }
///
/// button:active,
/// input[type="button"]:active,
/// input[type="reset"]:active,
/// input[type="submit"]:active {
/// background-color: #00f;
/// }
///
/// @require assign-inputs
///
/// @type List
///
/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
$buttons-list: 'button',
'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
$all-buttons: assign-inputs($buttons-list);
$all-buttons-active: assign-inputs($buttons-list, active);
$all-buttons-focus: assign-inputs($buttons-list, focus);
$all-buttons-hover: assign-inputs($buttons-list, hover);
$all-button-inputs: $all-buttons;
$all-button-inputs-active: $all-buttons-active;
$all-button-inputs-focus: $all-buttons-focus;
$all-button-inputs-hover: $all-buttons-hover;
@charset "UTF-8";
/// Provides an easy way to include a clearfix for containing floats.
///
/// @link http://cssmojo.com/latest_new_clearfix_so_far/
///
/// @example scss - Usage
/// .element {
/// @include clearfix;
/// }
///
/// @example css - CSS Output
/// .element::after {
/// clear: both;
/// content: "";
/// display: table;
/// }
@mixin clearfix {
&::after {
clear: both;
content: "";
display: table;
}
}
@charset "UTF-8";
/// Truncates text and adds an ellipsis to represent overflow.
///
/// @param {Number} $width [100%]
/// Max-width for the string to respect before being truncated
///
/// @example scss - Usage
/// .element {
/// @include ellipsis;
/// }
///
/// @example css - CSS Output
/// .element {
/// display: inline-block;
/// max-width: 100%;
/// overflow: hidden;
/// text-overflow: ellipsis;
/// white-space: nowrap;
/// word-wrap: normal;
/// }
@mixin ellipsis($width: 100%) {
display: inline-block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
@charset "UTF-8";
/// Georgia font stack.
///
/// @type List
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
/// Helvetica font stack.
///
/// @type List
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
/// Lucida Grande font stack.
///
/// @type List
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
/// Monospace font stack.
///
/// @type List
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
/// Verdana font stack.
///
/// @type List
$verdana: "Verdana", "Geneva", sans-serif;
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
///
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
///
/// @example scss - Usage
/// .element {
/// @include hide-text;
/// }
///
/// @example css - CSS Output
/// .element {
/// overflow: hidden;
/// text-indent: 101%;
/// white-space: nowrap;
/// }
///
/// @todo Remove height argument in v5.0.0
@mixin hide-text($height: null) {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
@if $height {
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
}
}
@charset "UTF-8";
/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include margin(null 10px 3em 20vh);
/// }
///
/// @example css - CSS Output
/// .element {
/// margin-bottom: 3em;
/// margin-left: 20vh;
/// margin-right: 10px;
/// }
///
/// @require {mixin} directional-property
///
/// @output `margin`
@mixin margin($vals...) {
@include directional-property(margin, false, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include padding(12vh null 10px 5%);
/// }
///
/// @example css - CSS Output
/// .element {
/// padding-bottom: 10px;
/// padding-left: 5%;
/// padding-top: 12vh;
/// }
///
/// @require {mixin} directional-property
///
/// @output `padding`
@mixin padding($vals...) {
@include directional-property(padding, false, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
///
/// @param {Position} $position [relative]
/// A CSS position value
///
/// @param {Arglist} $coordinates [null null null null]
/// List of values that correspond to the 4-value syntax for the edges of a box
///
/// @example scss - Usage
/// .element {
/// @include position(absolute, 0 null null 10em);
/// }
///
/// @example css - CSS Output
/// .element {
/// left: 10em;
/// position: absolute;
/// top: 0;
/// }
///
/// @require {function} is-length
/// @require {function} unpack
@mixin position($position: relative, $coordinates: null null null null) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
}
$coordinates: unpack($coordinates);
$offsets: (
top: nth($coordinates, 1),
right: nth($coordinates, 2),
bottom: nth($coordinates, 3),
left: nth($coordinates, 4)
);
position: $position;
@each $offset, $value in $offsets {
@if is-length($value) {
#{$offset}: $value;
}
}
}
@charset "UTF-8";
/// A mixin for generating vendor prefixes on non-standardized properties.
///
/// @param {String} $property
/// Property to prefix
///
/// @param {*} $value
/// Value to use
///
/// @param {List} $prefixes
/// Prefixes to define
///
/// @example scss - Usage
/// .element {
/// @include prefixer(border-radius, 10px, webkit ms spec);
/// }
///
/// @example css - CSS Output
/// .element {
/// -webkit-border-radius: 10px;
/// -moz-border-radius: 10px;
/// border-radius: 10px;
/// }
///
/// @require {variable} $prefix-for-webkit
/// @require {variable} $prefix-for-mozilla
/// @require {variable} $prefix-for-microsoft
/// @require {variable} $prefix-for-opera
/// @require {variable} $prefix-for-spec
@mixin prefixer($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
} @else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
} @else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
} @else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
} @else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
} @else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin disable-prefix-for-all() {
$prefix-for-webkit: false !global;
$prefix-for-mozilla: false !global;
$prefix-for-microsoft: false !global;
$prefix-for-opera: false !global;
$prefix-for-spec: false !global;
}
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
} @else {
background-image: url("#{$filename}.#{$extension}");
}
@include hidpi {
@if $asset-pipeline {
@if $retina-filename {
background-image: image-url("#{$retina-filename}.#{$extension}");
} @else {
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
}
} @else {
@if $retina-filename {
background-image: url("#{$retina-filename}.#{$extension}");
} @else {
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
background-size: $background-size;
}
}
@charset "UTF-8";
/// Sets the `width` and `height` of the element.
///
/// @param {List} $size
/// A list of at most 2 size values.
///
/// If there is only a single value in `$size` it is used for both width and height. All units are supported.
///
/// @example scss - Usage
/// .first-element {
/// @include size(2em);
/// }
///
/// .second-element {
/// @include size(auto 10em);
/// }
///
/// @example css - CSS Output
/// .first-element {
/// width: 2em;
/// height: 2em;
/// }
///
/// .second-element {
/// width: auto;
/// height: 10em;
/// }
///
/// @todo Refactor in 5.0.0 to use a comma-separated argument
@mixin size($value) {
$width: nth($value, 1);
$height: $width;
@if length($value) > 1 {
$height: nth($value, 2);
}
@if is-size($height) {
height: $height;
} @else {
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
}
@if is-size($width) {
width: $width;
} @else {
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
}
}
@charset "UTF-8";
/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
///
/// @example scss - Usage
/// #{$all-text-inputs} {
/// border: 1px solid #f00;
/// }
///
/// #{$all-text-inputs-focus},
/// #{$all-text-inputs-hover} {
/// border: 1px solid #0f0;
/// }
///
/// #{$all-text-inputs-active} {
/// border: 1px solid #00f;
/// }
///
/// @example css - CSS Output
/// input[type="color"],
/// input[type="date"],
/// input[type="datetime"],
/// input[type="datetime-local"],
/// input[type="email"],
/// input[type="month"],
/// input[type="number"],
/// input[type="password"],
/// input[type="search"],
/// input[type="tel"],
/// input[type="text"],
/// input[type="time"],
/// input[type="url"],
/// input[type="week"],
/// textarea {
/// border: 1px solid #f00;
/// }
///
/// input[type="color"]:focus,
/// input[type="date"]:focus,
/// input[type="datetime"]:focus,
/// input[type="datetime-local"]:focus,
/// input[type="email"]:focus,
/// input[type="month"]:focus,
/// input[type="number"]:focus,
/// input[type="password"]:focus,
/// input[type="search"]:focus,
/// input[type="tel"]:focus,
/// input[type="text"]:focus,
/// input[type="time"]:focus,
/// input[type="url"]:focus,
/// input[type="week"]:focus,
/// textarea:focus,
/// input[type="color"]:hover,
/// input[type="date"]:hover,
/// input[type="datetime"]:hover,
/// input[type="datetime-local"]:hover,
/// input[type="email"]:hover,
/// input[type="month"]:hover,
/// input[type="number"]:hover,
/// input[type="password"]:hover,
/// input[type="search"]:hover,
/// input[type="tel"]:hover,
/// input[type="text"]:hover,
/// input[type="time"]:hover,
/// input[type="url"]:hover,
/// input[type="week"]:hover,
/// textarea:hover {
/// border: 1px solid #0f0;
/// }
///
/// input[type="color"]:active,
/// input[type="date"]:active,
/// input[type="datetime"]:active,
/// input[type="datetime-local"]:active,
/// input[type="email"]:active,
/// input[type="month"]:active,
/// input[type="number"]:active,
/// input[type="password"]:active,
/// input[type="search"]:active,
/// input[type="tel"]:active,
/// input[type="text"]:active,
/// input[type="time"]:active,
/// input[type="url"]:active,
/// input[type="week"]:active,
/// textarea:active {
/// border: 1px solid #00f;
/// }
///
/// @require assign-inputs
///
/// @type List
$text-inputs-list: 'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'textarea';
$all-text-inputs: assign-inputs($text-inputs-list);
$all-text-inputs-active: assign-inputs($text-inputs-list, active);
$all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
$all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
@charset "UTF-8";
/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
///
/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
///
/// @type cubic-bezier
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
@mixin triangle($size, $color, $direction) {
$width: nth($size, 1);
$height: nth($size, length($size));
$foreground-color: nth($color, 1);
$background-color: if(length($color) == 2, nth($color, 2), transparent);
height: 0;
width: 0;
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
$width: $width / 2;
$height: if(length($size) > 1, $height, $height/2);
@if $direction == up {
border-bottom: $height solid $foreground-color;
border-left: $width solid $background-color;
border-right: $width solid $background-color;
} @else if $direction == right {
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
border-top: $width solid $background-color;
} @else if $direction == down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
} @else if $direction == left {
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
border-top: $width solid $background-color;
}
} @else if ($direction == up-right) or ($direction == up-left) {
border-top: $height solid $foreground-color;
@if $direction == up-right {
border-left: $width solid $background-color;
} @else if $direction == up-left {
border-right: $width solid $background-color;
}
} @else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $height solid $foreground-color;
@if $direction == down-right {
border-left: $width solid $background-color;
} @else if $direction == down-left {
border-right: $width solid $background-color;
}
} @else if ($direction == inset-up) {
border-color: $background-color $background-color $foreground-color;
border-style: solid;
border-width: $height $width;
} @else if ($direction == inset-down) {
border-color: $foreground-color $background-color $background-color;
border-style: solid;
border-width: $height $width;
} @else if ($direction == inset-right) {
border-color: $background-color $background-color $background-color $foreground-color;
border-style: solid;
border-width: $width $height;
} @else if ($direction == inset-left) {
border-color: $background-color $foreground-color $background-color $background-color;
border-style: solid;
border-width: $width $height;
}
}
@charset "UTF-8";
/// Provides an easy way to change the `word-wrap` property.
///
/// @param {String} $wrap [break-word]
/// Value for the `word-break` property.
///
/// @example scss - Usage
/// .wrapper {
/// @include word-wrap(break-word);
/// }
///
/// @example css - CSS Output
/// .wrapper {
/// overflow-wrap: break-word;
/// word-break: break-all;
/// word-wrap: break-word;
/// }
@mixin word-wrap($wrap: break-word) {
overflow-wrap: $wrap;
word-wrap: $wrap;
@if $wrap == break-word {
word-break: break-all;
} @else {
word-break: $wrap;
}
}
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
@mixin animation($animations...) {
@include prefixer(animation, $animations, webkit moz spec);
}
@mixin animation-name($names...) {
@include prefixer(animation-name, $names, webkit moz spec);
}
@mixin animation-duration($times...) {
@include prefixer(animation-duration, $times, webkit moz spec);
}
@mixin animation-timing-function($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
@include prefixer(animation-timing-function, $motions, webkit moz spec);
}
@mixin animation-iteration-count($values...) {
// infinite | <number>
@include prefixer(animation-iteration-count, $values, webkit moz spec);
}
@mixin animation-direction($directions...) {
// normal | alternate
@include prefixer(animation-direction, $directions, webkit moz spec);
}
@mixin animation-play-state($states...) {
// running | paused
@include prefixer(animation-play-state, $states, webkit moz spec);
}
@mixin animation-delay($times...) {
@include prefixer(animation-delay, $times, webkit moz spec);
}
@mixin animation-fill-mode($modes...) {
// none | forwards | backwards | both
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
}
@mixin appearance($value) {
@include prefixer(appearance, $value, webkit moz ms o spec);
}
@mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec);
}
//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//
@mixin background-image($images...) {
$webkit-images: ();
$spec-images: ();
@each $image in $images {
$webkit-image: ();
$spec-image: ();
@if (type-of($image) == string) {
$url-str: str-slice($image, 0, 3);
$gradient-type: str-slice($image, 0, 6);
@if $url-str == "url" {
$webkit-image: $image;
$spec-image: $image;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser($image);
$webkit-image: map-get($gradients, webkit-image);
$spec-image: map-get($gradients, spec-image);
}
}
$webkit-images: append($webkit-images, $webkit-image, comma);
$spec-images: append($spec-images, $spec-image, comma);
}
background-image: $webkit-images;
background-image: $spec-images;
}
//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//
@mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
@each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
@if $background-type == string or $background-type == list {
$background-str: if($background-type == list, nth($background, 1), $background);
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
@if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image);
$spec-background: map-get($gradients, spec-image);
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
}
@else {
$webkit-background: $background;
$spec-background: $background;
}
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
}
background: $webkit-backgrounds;
background: $spec-backgrounds;
}
@mixin border-image($borders...) {
$webkit-borders: ();
$spec-borders: ();
@each $border in $borders {
$webkit-border: ();
$spec-border: ();
$border-type: type-of($border);
@if $border-type == string or list {
$border-str: if($border-type == list, nth($border, 1), $border);
$url-str: str-slice($border-str, 0, 3);
$gradient-type: str-slice($border-str, 0, 6);
@if $url-str == "url" {
$webkit-border: $border;
$spec-border: $border;
}
@else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$border}");
$webkit-border: map-get($gradients, webkit-image);
$spec-border: map-get($gradients, spec-image);
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
}
@else {
$webkit-border: $border;
$spec-border: $border;
}
$webkit-borders: append($webkit-borders, $webkit-border, comma);
$spec-borders: append($spec-borders, $spec-border, comma);
}
-webkit-border-image: $webkit-borders;
border-image: $spec-borders;
border-style: solid;
}
//Examples:
// @include border-image(url("image.png"));
// @include border-image(url("image.png") 20 stretch);
// @include border-image(linear-gradient(45deg, orange, yellow));
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
@mixin calc($property, $value) {
#{$property}: -webkit-calc(#{$value});
#{$property}: calc(#{$value});
}
@mixin columns($arg: auto) {
// <column-count> || <column-width>
@include prefixer(columns, $arg, webkit moz spec);
}
@mixin column-count($int: auto) {
// auto || integer
@include prefixer(column-count, $int, webkit moz spec);
}
@mixin column-gap($length: normal) {
// normal || length
@include prefixer(column-gap, $length, webkit moz spec);
}
@mixin column-fill($arg: auto) {
// auto || length
@include prefixer(column-fill, $arg, webkit moz spec);
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg, webkit moz spec);
}
@mixin column-rule-color($color) {
@include prefixer(column-rule-color, $color, webkit moz spec);
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style, webkit moz spec);
}
@mixin column-rule-width ($width: none) {
@include prefixer(column-rule-width, $width, webkit moz spec);
}
@mixin column-span($arg: none) {
// none || all
@include prefixer(column-span, $arg, webkit moz spec);
}
@mixin column-width($length: auto) {
// auto || length
@include prefixer(column-width, $length, webkit moz spec);
}
@mixin filter($function: none) {
// <filter-function> [<filter-function]* | none
@include prefixer(filter, $function, webkit spec);
}
// CSS3 Flexible Box Model and property defaults
// Custom shorthand notation for flexbox
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
@include display-box;
@include box-orient($orient);
@include box-pack($pack);
@include box-align($align);
}
@mixin display-box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox; // IE 10
display: box;
}
@mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit
@include prefixer(box-orient, $orient, webkit moz spec);
}
@mixin box-pack($pack: start) {
// start|end|center|justify
@include prefixer(box-pack, $pack, webkit moz spec);
-ms-flex-pack: $pack; // IE 10
}
@mixin box-align($align: stretch) {
// start|end|center|baseline|stretch
@include prefixer(box-align, $align, webkit moz spec);
-ms-flex-align: $align; // IE 10
}
@mixin box-direction($direction: normal) {
// normal|reverse|inherit
@include prefixer(box-direction, $direction, webkit moz spec);
-ms-flex-direction: $direction; // IE 10
}
@mixin box-lines($lines: single) {
// single|multiple
@include prefixer(box-lines, $lines, webkit moz spec);
}
@mixin box-ordinal-group($int: 1) {
@include prefixer(box-ordinal-group, $int, webkit moz spec);
-ms-flex-order: $int; // IE 10
}
@mixin box-flex($value: 0) {
@include prefixer(box-flex, $value, webkit moz spec);
-ms-flex: $value; // IE 10
}
@mixin box-flex-group($int: 1) {
@include prefixer(box-flex-group, $int, webkit moz spec);
}
// CSS3 Flexible Box Model and property defaults
// Unified attributes for 2009, 2011, and 2012 flavours.
// 2009 - display (box | inline-box)
// 2011 - display (flexbox | inline-flexbox)
// 2012 - display (flex | inline-flex)
@mixin display($value) {
// flex | inline-flex
@if $value == "flex" {
// 2009
display: -webkit-box;
display: -moz-box;
display: box;
// 2012
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox; // 2011 (IE 10)
display: flex;
} @else if $value == "inline-flex" {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
} @else {
display: $value;
}
}
// 2009 - box-flex (integer)
// 2011 - flex (decimal | width decimal)
// 2012 - flex (integer integer width)
@mixin flex($value) {
// Grab flex-grow for older browsers.
$flex-grow: nth($value, 1);
// 2009
@include prefixer(box-flex, $flex-grow, webkit moz spec);
// 2011 (IE 10), 2012
@include prefixer(flex, $value, webkit moz ms spec);
}
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
// - box-direction (normal | reverse)
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
@mixin flex-direction($value: row) {
// Alt values.
$value-2009: $value;
$value-2011: $value;
$direction: "normal";
@if $value == row {
$value-2009: horizontal;
} @else if $value == "row-reverse" {
$value-2009: horizontal;
$direction: reverse;
} @else if $value == column {
$value-2009: vertical;
} @else if $value == "column-reverse" {
$value-2009: vertical;
$direction: reverse;
}
// 2009
@include prefixer(box-orient, $value-2009, webkit moz spec);
@if $direction == "reverse" {
@include prefixer(box-direction, $direction, webkit moz spec);
}
// 2012
@include prefixer(flex-direction, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-direction: $value;
}
// 2009 - box-lines (single | multiple)
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
@mixin flex-wrap($value: nowrap) {
// Alt values
$alt-value: $value;
@if $value == nowrap {
$alt-value: single;
} @else if $value == wrap {
$alt-value: multiple;
} @else if $value == "wrap-reverse" {
$alt-value: multiple;
}
@include prefixer(box-lines, $alt-value, webkit moz spec);
@include prefixer(flex-wrap, $value, webkit moz ms spec);
}
// 2009 - TODO: parse values into flex-direction/flex-wrap
// 2011 - TODO: parse values into flex-direction/flex-wrap
// 2012 - flex-flow (flex-direction || flex-wrap)
@mixin flex-flow($value) {
@include prefixer(flex-flow, $value, webkit moz spec);
}
// 2009 - box-ordinal-group (integer)
// 2011 - flex-order (integer)
// 2012 - order (integer)
@mixin order($int: 0) {
// 2009
@include prefixer(box-ordinal-group, $int, webkit moz spec);
// 2012
@include prefixer(order, $int, webkit moz spec);
// 2011 (IE 10)
-ms-flex-order: $int;
}
// 2012 - flex-grow (number)
@mixin flex-grow($number: 0) {
@include prefixer(flex-grow, $number, webkit moz spec);
-ms-flex-positive: $number;
}
// 2012 - flex-shrink (number)
@mixin flex-shrink($number: 1) {
@include prefixer(flex-shrink, $number, webkit moz spec);
-ms-flex-negative: $number;
}
// 2012 - flex-basis (number)
@mixin flex-basis($width: auto) {
@include prefixer(flex-basis, $width, webkit moz spec);
-ms-flex-preferred-size: $width;
}
// 2009 - box-pack (start | end | center | justify)
// 2011 - flex-pack (start | end | center | justify)
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
@mixin justify-content($value: flex-start) {
// Alt values.
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
} @else if $value == "flex-end" {
$alt-value: end;
} @else if $value == "space-between" {
$alt-value: justify;
} @else if $value == "space-around" {
$alt-value: distribute;
}
// 2009
@include prefixer(box-pack, $alt-value, webkit moz spec);
// 2012
@include prefixer(justify-content, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-pack: $alt-value;
}
// 2009 - box-align (start | end | center | baseline | stretch)
// 2011 - flex-align (start | end | center | baseline | stretch)
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
@mixin align-items($value: stretch) {
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
} @else if $value == "flex-end" {
$alt-value: end;
}
// 2009
@include prefixer(box-align, $alt-value, webkit moz spec);
// 2012
@include prefixer(align-items, $value, webkit moz ms o spec);
// 2011 (IE 10)
-ms-flex-align: $alt-value;
}
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
@mixin align-self($value: auto) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
} @else if $value == "flex-end" {
$value-2011: end;
}
// 2012
@include prefixer(align-self, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-item-align: $value-2011;
}
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
@mixin align-content($value: stretch) {
$value-2011: $value;
@if $value == "flex-start" {
$value-2011: start;
} @else if $value == "flex-end" {
$value-2011: end;
} @else if $value == "space-between" {
$value-2011: justify;
} @else if $value == "space-around" {
$value-2011: distribute;
}
// 2012
@include prefixer(align-content, $value, webkit moz spec);
// 2011 (IE 10)
-ms-flex-line-pack: $value-2011;
}
@mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff2 woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
@font-face {
font-family: $font-family;
font-style: $style;
font-weight: $weight;
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
@mixin font-feature-settings($settings...) {
@if length($settings) == 0 { $settings: none; }
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
}
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
@mixin hidpi($ratio: 1.3) {
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: round($ratio * 96dpi)),
only screen and (min-resolution: $ratio * 1dppx) {
@content;
}
}
@mixin hyphens($hyphenation: none) {
// none | manual | auto
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
}
@mixin image-rendering ($mode:auto) {
@if ($mode == crisp-edges) {
-ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@else {
image-rendering: $mode;
}
}
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name) {
$original-prefix-for-webkit: $prefix-for-webkit;
$original-prefix-for-mozilla: $prefix-for-mozilla;
$original-prefix-for-microsoft: $prefix-for-microsoft;
$original-prefix-for-opera: $prefix-for-opera;
$original-prefix-for-spec: $prefix-for-spec;
@if $original-prefix-for-webkit {
@include disable-prefix-for-all();
$prefix-for-webkit: true !global;
@-webkit-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-mozilla {
@include disable-prefix-for-all();
$prefix-for-mozilla: true !global;
@-moz-keyframes #{$name} {
@content;
}
}
$prefix-for-webkit: $original-prefix-for-webkit !global;
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
$prefix-for-opera: $original-prefix-for-opera !global;
$prefix-for-spec: $original-prefix-for-spec !global;
@if $original-prefix-for-spec {
@keyframes #{$name} {
@content;
}
}
}
@mixin linear-gradient($pos, $g1, $g2: null,
$g3: null, $g4: null,
$g5: null, $g6: null,
$g7: null, $g8: null,
$g9: null, $g10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
$pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
}
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
// Set $g1 as the default fallback color
$fallback-color: nth($g1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
background-color: $fallback-color;
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}
@mixin perspective($depth: none) {
// none | <length>
@include prefixer(perspective, $depth, webkit moz spec);
}
@mixin perspective-origin($value: 50% 50%) {
@include prefixer(perspective-origin, $value, webkit moz spec);
}
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
// Requires Sass 3.1+
@mixin radial-gradient($g1, $g2,
$g3: null, $g4: null,
$g5: null, $g6: null,
$g7: null, $g8: null,
$g9: null, $g10: null,
$pos: null,
$shape-size: null,
$fallback: null) {
$data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
$g1: nth($data, 1);
$g2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
// Strip deprecated cover/contain for spec
$shape-size-spec: _shape-size-stripper($shape-size);
// Set $g1 as the default fallback color
$first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
// Add Commas and spaces
$shape-size: if($shape-size, "#{$shape-size}, ", null);
$pos: if($pos, "#{$pos}, ", null);
$pos-spec: if($pos, "at #{$pos}", null);
$shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
background-color: $fallback-color;
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
}
@charset "UTF-8";
/// Outputs the spec and prefixed versions of the `::selection` pseudo-element.
///
/// @param {Bool} $current-selector [false]
/// If set to `true`, it takes the current element into consideration.
///
/// @example scss - Usage
/// .element {
/// @include selection(true) {
/// background-color: #ffbb52;
/// }
/// }
///
/// @example css - CSS Output
/// .element::-moz-selection {
/// background-color: #ffbb52;
/// }
///
/// .element::selection {
/// background-color: #ffbb52;
/// }
@mixin selection($current-selector: false) {
@if $current-selector {
&::-moz-selection {
@content;
}
&::selection {
@content;
}
} @else {
::-moz-selection {
@content;
}
::selection {
@content;
}
}
}
@mixin text-decoration($value) {
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
@include prefixer(text-decoration, $value, moz);
}
@mixin text-decoration-line($line: none) {
// none || underline || overline || line-through
@include prefixer(text-decoration-line, $line, moz);
}
@mixin text-decoration-style($style: solid) {
// solid || double || dotted || dashed || wavy
@include prefixer(text-decoration-style, $style, moz webkit);
}
@mixin text-decoration-color($color: currentColor) {
// currentColor || <color>
@include prefixer(text-decoration-color, $color, moz);
}
@mixin transform($property: none) {
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
}
@mixin transform-style($style: flat) {
@include prefixer(transform-style, $style, webkit moz ms o spec);
}
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);
@mixin transition($properties...) {
// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
$moz: ();
$spec: ();
// Create lists for vendor-prefixed transform
@each $list in $properties {
@if nth($list, 1) == "transform" {
$needs-prefixes: true;
$list1: -webkit-transform;
$list2: -moz-transform;
$list3: ();
@each $var in $list {
$list3: join($list3, $var);
@if $var != "transform" {
$list1: join($list1, $var);
$list2: join($list2, $var);
}
}
$webkit: append($webkit, $list1);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
} @else {
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
}
}
@if $needs-prefixes {
-webkit-transition: $webkit;
-moz-transition: $moz;
transition: $spec;
} @else {
@if length($properties) >= 1 {
@include prefixer(transition, $properties, webkit moz spec);
} @else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec);
}
}
}
@mixin transition-property($properties...) {
-webkit-transition-property: transition-property-names($properties, "webkit");
-moz-transition-property: transition-property-names($properties, "moz");
transition-property: transition-property-names($properties, false);
}
@mixin transition-duration($times...) {
@include prefixer(transition-duration, $times, webkit moz spec);
}
@mixin transition-timing-function($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, webkit moz spec);
}
@mixin transition-delay($times...) {
@include prefixer(transition-delay, $times, webkit moz spec);
}
@mixin user-select($value: none) {
@include prefixer(user-select, $value, webkit moz ms spec);
}
@function assign-inputs($inputs, $pseudo: null) {
$list: ();
@each $input in $inputs {
$input: unquote($input);
$input: if($pseudo, $input + ":" + $pseudo, $input);
$list: append($list, $input, comma);
}
@return $list;
}
@charset "UTF-8";
/// Checks if a list does not contains a value.
///
/// @access private
///
/// @param {List} $list
/// The list to check against.
///
/// @return {Bool}
@function contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}
@charset "UTF-8";
/// Checks if a list contains a value(s).
///
/// @access private
///
/// @param {List} $list
/// The list to check against.
///
/// @param {List} $values
/// A single value or list of values to check for.
///
/// @example scss - Usage
/// contains($list, $value)
///
/// @return {Bool}
@function contains($list, $values...) {
@each $value in $values {
@if type-of(index($list, $value)) != "number" {
@return false;
}
}
@return true;
}
@charset "UTF-8";
/// Checks for a valid CSS length.
///
/// @param {String} $value
@function is-length($value) {
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
or index(auto inherit initial 0, $value)
or (type-of($value) == "number" and not(unitless($value))));
}
@charset "UTF-8";
/// Programatically determines whether a color is light or dark.
///
/// @link http://robots.thoughtbot.com/closer-look-color-lightness
///
/// @param {Color (Hex)} $color
///
/// @example scss - Usage
/// is-light($color)
///
/// @return {Bool}
@function is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1));
$-local-green: green(rgba($hex-color, 1));
$-local-blue: blue(rgba($hex-color, 1));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > 0.6;
}
@charset "UTF-8";
/// Checks for a valid number.
///
/// @param {Number} $value
///
/// @require {function} contains
@function is-number($value) {
@return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
}
@charset "UTF-8";
/// Checks for a valid CSS size.
///
/// @param {String} $value
///
/// @require {function} contains
/// @require {function} is-length
@function is-size($value) {
@return is-length($value)
or contains("fill" "fit-content" "min-content" "max-content", $value);
}
// Scaling Variables
$golden: 1.618;
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;
$modular-scale-ratio: $perfect-fourth !default;
$modular-scale-base: em($em-base) !default;
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;
// scale $v2 to just above $v1
@while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1
}
@while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1
}
// check AFTER scaling $v2 to prevent double-counting corner-case
$double-stranded: $v2 > $v1;
@if $increment > 0 {
@for $i from 1 through $increment {
@if $double-stranded and ($v1 * $ratio) > $v2 {
$value: $v2;
$v2: ($v2 * $ratio);
} @else {
$v1: ($v1 * $ratio);
$value: $v1;
}
}
}
@if $increment < 0 {
// adjust $v2 to just below $v1
@if $double-stranded {
$v2: ($v2 / $ratio);
}
@for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 {
$value: $v2;
$v2: ($v2 / $ratio);
} @else {
$v1: ($v1 / $ratio);
$value: $v1;
}
}
}
@return $value;
}
// Convert pixels to ems
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
@function em($pxval, $base: $em-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1em;
}
// Convert pixels to rems
// eg. for a relational value of 12px write rem(12)
// Assumes $em-base is the font-size of <html>
@function rem($pxval) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
$base: $em-base;
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1rem;
}
@charset "UTF-8";
/// Mixes a color with black.
///
/// @param {Color} $color
///
/// @param {Number (Percentage)} $percent
/// The amount of black to be mixed in.
///
/// @example scss - Usage
/// .element {
/// background-color: shade(#ffbb52, 60%);
/// }
///
/// @example css - CSS Output
/// .element {
/// background-color: #664a20;
/// }
///
/// @return {Color}
@function shade($color, $percent) {
@return mix(#000, $color, $percent);
}
@charset "UTF-8";
/// Strips the unit from a number.
///
/// @param {Number (With Unit)} $value
///
/// @example scss - Usage
/// $dimension: strip-units(10em);
///
/// @example css - CSS Output
/// $dimension: 10;
///
/// @return {Number (Unitless)}
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
@charset "UTF-8";
/// Mixes a color with white.
///
/// @param {Color} $color
///
/// @param {Number (Percentage)} $percent
/// The amount of white to be mixed in.
///
/// @example scss - Usage
/// .element {
/// background-color: tint(#6ecaa6, 40%);
/// }
///
/// @example css - CSS Output
/// .element {
/// background-color: #a8dfc9;
/// }
///
/// @return {Color}
@function tint($color, $percent) {
@return mix(#fff, $color, $percent);
}
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
@charset "UTF-8";
/// Converts shorthand to the 4-value syntax.
///
/// @param {List} $shorthand
///
/// @example scss - Usage
/// .element {
/// margin: unpack(1em 2em);
/// }
///
/// @example css - CSS Output
/// .element {
/// margin: 1em 2em 1em 2em;
/// }
@function unpack($shorthand) {
@if length($shorthand) == 1 {
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
} @else if length($shorthand) == 2 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
} @else if length($shorthand) == 3 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
} @else {
@return $shorthand;
}
}
//************************************************************************//
// Helper function for str-to-num fn.
// Source: http://sassmeister.com/gist/9647408
//************************************************************************//
@function _convert-units($number, $unit) {
$strings: "px" "cm" "mm" "%" "ch" "pica" "in" "em" "rem" "pt" "pc" "ex" "vw" "vh" "vmin" "vmax", "deg", "rad", "grad", "turn";
$units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
$index: index($strings, $unit);
@if not $index {
@warn "Unknown unit `#{$unit}`.";
@return false;
}
@return $number * nth($units, $index);
}
@charset "UTF-8";
/// Directional-property mixins are shorthands for writing properties like the following
///
/// @ignore You can also use `false` instead of `null`.
///
/// @param {List} $vals
/// List of directional values
///
/// @example scss - Usage
/// .element {
/// @include border-style(dotted null);
/// @include margin(null 0 10px);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-style: dotted;
/// border-top-style: dotted;
/// margin-bottom: 10px;
/// margin-left: 0;
/// margin-right: 0;
/// }
///
/// @require {function} contains-falsy
///
/// @return {List}
@function collapse-directionals($vals) {
$output: null;
$a: nth($vals, 1);
$b: if(length($vals) < 2, $a, nth($vals, 2));
$c: if(length($vals) < 3, $a, nth($vals, 3));
$d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));
@if $a == 0 { $a: 0; }
@if $b == 0 { $b: 0; }
@if $c == 0 { $c: 0; }
@if $d == 0 { $d: 0; }
@if $a == $b and $a == $c and $a == $d { $output: $a; }
@else if $a == $c and $b == $d { $output: $a $b; }
@else if $b == $d { $output: $a $b $c; }
@else { $output: $a $b $c $d; }
@return $output;
}
/// Output directional properties, for instance `margin`.
///
/// @access private
///
/// @param {String} $pre
/// Prefix to use
/// @param {String} $suf
/// Suffix to use
/// @param {List} $vals
/// List of values
///
/// @require {function} collapse-directionals
/// @require {function} contains-falsy
@mixin directional-property($pre, $suf, $vals) {
// Property Names
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
@if length($vals) == 1 {
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
} @else {
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
}
@if length($vals) == 2 {
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
} @else if length($vals) == 3 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
} @else if length($vals) == 4 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
}
} @else {
#{$all}: $vals;
}
}
// Used for creating the source string for fonts using @font-face
// Reference: http://goo.gl/Ru1bKP
@function font-url-prefixer($asset-pipeline) {
@if $asset-pipeline == true {
@return font-url;
} @else {
@return url;
}
}
@function font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url) {
$src: null;
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
woff: "#{$file-path}.woff" format("woff"),
ttf: "#{$file-path}.ttf" format("truetype"),
svg: "#{$file-path}.svg##{$font-family}" format("svg")
);
@each $key, $values in $formats-map {
@if contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
@if $asset-pipeline == true {
$src: append($src, font-url($file-path) $font-format, comma);
} @else {
$src: append($src, url($file-path) $font-format, comma);
}
}
}
@return $src;
}
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
@if $gradient-positions
and ($gradient-type == linear)
and (type-of($gradient-positions) != color) {
$gradient-positions: _linear-positions-parser($gradient-positions);
}
@else if $gradient-positions
and ($gradient-type == radial)
and (type-of($gradient-positions) != color) {
$gradient-positions: _radial-positions-parser($gradient-positions);
}
@return $gradient-positions;
}
// Private function for linear-gradient-parser
@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
$offset: null;
$unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
$unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
@if ($unit-long == "grad") or
($unit-long == "turn") {
$offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
}
@else if ($unit-short == "deg") or
($unit-short == "rad") {
$offset: if($unit-short == "deg", -90 * 3, 1.6rad);
}
@if $offset {
$num: _str-to-num($first-val);
@return (
webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
spec-image: $image
);
}
}
@function _linear-gradient-parser($image) {
$image: unquote($image);
$gradients: ();
$start: str-index($image, "(");
$end: str-index($image, ",");
$first-val: str-slice($image, $start + 1, $end - 1);
$prefix: str-slice($image, 0, $start);
$suffix: str-slice($image, $end, str-length($image));
$has-multiple-vals: str-index($first-val, " ");
$has-single-position: unquote(_position-flipper($first-val) + "");
$has-angle: is-number(str-slice($first-val, 0, 0));
@if $has-multiple-vals {
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
}
@else if $has-single-position != "" {
$pos: unquote($has-single-position + "");
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $prefix + "to " + $pos + $suffix
);
}
@else if $has-angle {
// Rotate degree for webkit
$gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
}
@else {
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $image
);
}
@return $gradients;
}
@function _linear-positions-parser($pos) {
$type: type-of(nth($pos, 1));
$spec: null;
$degree: null;
$side: null;
$corner: null;
$length: length($pos);
// Parse Side and corner positions
@if ($length > 1) {
@if nth($pos, 1) == "to" { // Newer syntax
$side: nth($pos, 2);
@if $length == 2 { // eg. to top
// Swap for backwards compatability
$degree: _position-flipper(nth($pos, 2));
}
@else if $length == 3 { // eg. to top left
$corner: nth($pos, 3);
}
}
@else if $length == 2 { // Older syntax ("top left")
$side: _position-flipper(nth($pos, 1));
$corner: _position-flipper(nth($pos, 2));
}
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
$spec: to $side $corner;
}
@else if $length == 1 {
// Swap for backwards compatability
@if $type == string {
$degree: $pos;
$spec: to _position-flipper($pos);
}
@else {
$degree: -270 - $pos; //rotate the gradient opposite from spec
$spec: $pos;
}
}
$degree: unquote($degree + ",");
$spec: unquote($spec + ",");
@return $degree $spec;
}
@function _position-flipper($pos) {
@return if($pos == left, right, null)
if($pos == right, left, null)
if($pos == top, bottom, null)
if($pos == bottom, top, null);
}
// Private function for linear-gradient-parser
@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
$val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
$val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
$val-3: null;
$has-val-3: str-index($val-2, " ");
@if $has-val-3 {
$val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
$val-2: str-slice($val-2, 0, $has-val-3 - 1);
}
$pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
$pos: unquote($pos + "");
// Use old spec for webkit
@if $val-1 == "to" {
@return (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
);
}
// Bring the code up to spec
@else {
@return (
webkit-image: -webkit- + $image,
spec-image: $prefix + "to " + $pos + $suffix
);
}
}
@function _radial-arg-parser($g1, $g2, $pos, $shape-size) {
@each $value in $g1, $g2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
$spec-at-index: null;
// Determine if spec was passed to mixin
@if type-of($value) == list {
$spec-at-index: if(index($value, at), index($value, at), false);
}
@if $spec-at-index {
@if $spec-at-index > 1 {
@for $i from 1 through ($spec-at-index - 1) {
$shape-size: $shape-size nth($value, $i);
}
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
@else if $spec-at-index == 1 {
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
$g1: null;
}
// If not spec calculate correct values
@else {
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $g1 {
$g1: null;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $g1 {
$g1: null;
}
@else if $value == $g2 {
$g2: null;
}
}
}
}
}
@return $g1, $g2, $pos, $shape-size;
}
@function _radial-gradient-parser($image) {
$image: unquote($image);
$gradients: ();
$start: str-index($image, "(");
$end: str-index($image, ",");
$first-val: str-slice($image, $start + 1, $end - 1);
$prefix: str-slice($image, 0, $start);
$suffix: str-slice($image, $end, str-length($image));
$is-spec-syntax: str-index($first-val, "at");
@if $is-spec-syntax and $is-spec-syntax > 1 {
$keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
$pos: append($pos, $keyword, comma);
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
);
}
@else if $is-spec-syntax == 1 {
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
);
}
@else if str-index($image, "cover") or str-index($image, "contain") {
@warn "Radial-gradient needs to be updated to conform to latest spec.";
$gradients: (
webkit-image: null,
spec-image: $image
);
}
@else {
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $image
);
}
@return $gradients;
}
@function _radial-positions-parser($gradient-pos) {
$shape-size: nth($gradient-pos, 1);
$pos: nth($gradient-pos, 2);
$shape-size-spec: _shape-size-stripper($shape-size);
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
unquote(if($shape-size, "#{$shape-size},", null));
$pos-spec: if($pos, "at #{$pos}", null);
$spec: "#{$shape-size-spec} #{$pos-spec}";
// Add comma
@if ($spec != " ") {
$spec: "#{$spec},";
}
@return $pre-spec $spec;
}
// User for linear and radial gradients within background-image or border-image properties
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
$pre-spec: null;
$spec: null;
$vendor-gradients: null;
@if $gradient-type == linear {
@if $gradient-positions {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
}
@else if $gradient-type == radial {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
@function _shape-size-stripper($shape-size) {
$shape-size-spec: null;
@each $value in $shape-size {
@if ($value == "cover") or ($value == "contain") {
$value: null;
}
$shape-size-spec: "#{$shape-size-spec} #{$value}";
}
@return $shape-size-spec;
}
//************************************************************************//
// Helper function for linear/radial-gradient-parsers.
// Source: http://sassmeister.com/gist/9647408
//************************************************************************//
@function _str-to-num($string) {
// Matrices
$strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
$numbers: 0 1 2 3 4 5 6 7 8 9;
// Result
$result: 0;
$divider: 0;
$minus: false;
// Looping through all characters
@for $i from 1 through str-length($string) {
$character: str-slice($string, $i, $i);
$index: index($strings, $character);
@if $character == "-" {
$minus: true;
}
@else if $character == "." {
$divider: 1;
}
@else {
@if not $index {
$result: if($minus, $result * -1, $result);
@return _convert-units($result, str-slice($string, $i));
}
$number: nth($numbers, $index);
@if $divider == 0 {
$result: $result * 10;
}
@else {
// Move the decimal dot to the left
$divider: $divider * 10;
$number: $number / $divider;
}
$result: $result + $number;
}
}
@return if($minus, $result * -1, $result);
}
@charset "UTF-8";
/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it.
///
/// @type Bool
$asset-pipeline: false !default;
@charset "UTF-8";
/// Global variables to enable or disable vendor prefixes
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;
//////////////////////////////
// Default Variables
//////////////////////////////
$Breakpoint-Settings: (
'default media': all,
'default feature': min-width,
'default pair': width,
'force all media type': false,
'to ems': false,
'transform resolutions': true,
'no queries': false,
'no query fallbacks': false,
'base font size': 16px,
'legacy syntax': false
);
$breakpoint: () !default;
//////////////////////////////
// Imports
//////////////////////////////
@import "breakpoint/settings";
@import 'breakpoint/context';
@import 'breakpoint/helpers';
@import 'breakpoint/parsers';
@import 'breakpoint/no-query';
@import 'breakpoint/respond-to';
@import "breakpoint/legacy-settings";
//////////////////////////////
// Breakpoint Mixin
//////////////////////////////
@mixin breakpoint($query, $no-query: false) {
@include legacy-settings-warning;
// Reset contexts
@include private-breakpoint-reset-contexts();
$breakpoint: breakpoint($query, false);
$query-string: map-get($breakpoint, 'query');
$query-fallback: map-get($breakpoint, 'fallback');
$private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
$private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
// Allow for an as-needed override or usage of no query fallback.
@if $no-query != false {
$query-fallback: $no-query;
}
@if $query-fallback != false {
$context-setter: private-breakpoint-set-context('no-query', $query-fallback);
}
// Print Out Query String
@if not breakpoint-get('no queries') {
@media #{$query-string} {
@content;
}
}
@if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
$type: type-of(breakpoint-get('no query fallbacks'));
$print: false;
@if ($type == 'bool') {
$print: true;
}
@else if ($type == 'string') {
@if $query-fallback == breakpoint-get('no query fallbacks') {
$print: true;
}
}
@else if ($type == 'list') {
@each $wrapper in breakpoint-get('no query fallbacks') {
@if $query-fallback == $wrapper {
$print: true;
}
}
}
// Write Fallback
@if ($query-fallback != false) and ($print == true) {
$type-fallback: type-of($query-fallback);
@if ($type-fallback != 'bool') {
#{$query-fallback} & {
@content;
}
}
@else {
@content;
}
}
}
@include private-breakpoint-reset-contexts();
}
@mixin mq($query, $no-query: false) {
@include breakpoint($query, $no-query) {
@content;
}
}
//////////////////////////////
// Private Breakpoint Variables
//////////////////////////////
$private-breakpoint-context-holder: ();
$private-breakpoint-query-count: 0 !default;
//////////////////////////////
// Breakpoint Has Context
// Returns whether or not you are inside a Breakpoint query
//////////////////////////////
@function breakpoint-has-context() {
@if length($private-breakpoint-query-count) {
@return true;
}
@else {
@return false;
}
}
//////////////////////////////
// Breakpoint Get Context
// $feature: Input feature to get it's current MQ context. Returns false if no context
//////////////////////////////
@function breakpoint-get-context($feature) {
@if map-has-key($private-breakpoint-context-holder, $feature) {
$get: map-get($private-breakpoint-context-holder, $feature);
// Special handling of no-query from get side so /false/ prepends aren't returned
@if $feature == 'no-query' {
@if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false {
$get: nth($get, length($get));
}
}
@return $get;
}
@else {
@if breakpoint-has-context() and $feature == 'media' {
@return breakpoint-get('default media');
}
@else {
@return false;
}
}
}
//////////////////////////////
// Private function to set context
//////////////////////////////
@function private-breakpoint-set-context($feature, $value) {
@if $value == 'monochrome' {
$feature: 'monochrome';
}
$current: map-get($private-breakpoint-context-holder, $feature);
@if $current and length($current) == $private-breakpoint-query-count {
@warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`";
}
@if not map-has-key($private-breakpoint-context-holder, $feature) {
$v-holder: ();
@for $i from 1 to $private-breakpoint-query-count {
@if $feature == 'media' {
$v-holder: append($v-holder, breakpoint-get('default media'));
}
@else {
$v-holder: append($v-holder, false);
}
}
$v-holder: append($v-holder, $value);
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
}
@else {
$v-holder: map-get($private-breakpoint-context-holder, $feature);
$length: length($v-holder);
@for $i from $length to $private-breakpoint-query-count - 1 {
@if $feature == 'media' {
$v-holder: append($v-holder, breakpoint-get('default media'));
}
@else {
$v-holder: append($v-holder, false);
}
}
$v-holder: append($v-holder, $value);
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
}
@return true;
}
//////////////////////////////
// Private function to reset context
//////////////////////////////
@mixin private-breakpoint-reset-contexts {
$private-breakpoint-context-holder: () !global;
$private-breakpoint-query-count: 0 !global;
}
\ No newline at end of file
//////////////////////////////
// Converts the input value to Base EMs
//////////////////////////////
@function breakpoint-to-base-em($value) {
$value-unit: unit($value);
// Will convert relative EMs into root EMs.
@if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' {
$base-unit: unit(breakpoint-get('base font size'));
@if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
@return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em;
}
@else {
@warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!';
@return false;
}
}
@else {
@return base-conversion($value);
}
}
@function base-conversion($value) {
$unit: unit($value);
@if $unit == 'px' {
@return $value / 16px * 1em;
}
@else if $unit == '%' {
@return $value / 100% * 1em;
}
@else if $unit == 'em' {
@return $value;
}
@else if $unit == 'pt' {
@return $value / 12pt * 1em;
}
@else {
@return $value;
// @warn 'Everything is terrible! What have you done?!';
}
}
//////////////////////////////
// Returns whether the feature can have a min/max pair
//////////////////////////////
$breakpoint-min-max-features: 'color',
'color-index',
'aspect-ratio',
'device-aspect-ratio',
'device-height',
'device-width',
'height',
'monochrome',
'resolution',
'width';
@function breakpoint-min-max($feature) {
@each $item in $breakpoint-min-max-features {
@if $feature == $item {
@return true;
}
}
@return false;
}
//////////////////////////////
// Returns whether the feature can have a string value
//////////////////////////////
$breakpoint-string-features: 'orientation',
'scan',
'color',
'aspect-ratio',
'device-aspect-ratio',
'pointer',
'luminosity';
@function breakpoint-string-value($feature) {
@each $item in $breakpoint-string-features {
@if breakpoint-min-max($item) {
@if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
@return true;
}
}
@else if $feature == $item {
@return true;
}
}
@return false;
}
//////////////////////////////
// Returns whether the feature is a media type
//////////////////////////////
$breakpoint-media-types: 'all',
'braille',
'embossed',
'handheld',
'print',
'projection',
'screen',
'speech',
'tty',
'tv';
@function breakpoint-is-media($feature) {
@each $media in $breakpoint-media-types {
@if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
@return true;
}
}
@return false;
}
//////////////////////////////
// Returns whether the feature can stand alone
//////////////////////////////
$breakpoint-single-string-features: 'color',
'color-index',
'grid',
'monochrome';
@function breakpoint-single-string($feature) {
@each $item in $breakpoint-single-string-features {
@if $feature == $item {
@return true;
}
}
@return false;
}
//////////////////////////////
// Returns whether the feature
//////////////////////////////
@function breakpoint-is-resolution($feature) {
$resolutions: 'device-pixel-ratio', 'dpr';
@if breakpoint-get('transform resolutions') {
$resolutions: append($resolutions, 'resolution');
}
@each $reso in $resolutions {
@if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
@return true;
}
}
@return false;
}
@mixin legacy-settings-warning {
$legacyVars: (
'default-media': 'default media',
'default-feature': 'default feature',
'force-media-all': 'force all media type',
'to-ems': 'to ems',
'resolutions': 'transform resolutions',
'no-queries': 'no queries',
'no-query-fallbacks': 'no query fallbacks',
'base-font-size': 'base font size',
'legacy-syntax': 'legacy syntax'
);
@each $legacy, $new in $legacyVars {
@if global-variable-exists('breakpoint-' + $legacy) {
@warn "In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-#{$legacy}: {{setting}}` to `@include breakpoint-set('#{$new}', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release."
}
};
//////////////////////////////
// Hand correct each setting
//////////////////////////////
@if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != breakpoint-get('default media') {
@include breakpoint-set('default media', $breakpoint-default-media);
}
@if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != breakpoint-get('default feature') {
@include breakpoint-set('default feature', $breakpoint-default-feature);
}
@if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != breakpoint-get('force all media type') {
@include breakpoint-set('force all media type', $breakpoint-force-media-all);
}
@if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != breakpoint-get('to ems') {
@include breakpoint-set('to ems', $breakpoint-to-ems);
}
@if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != breakpoint-get('transform resolutions') {
@include breakpoint-set('transform resolutions', $breakpoint-resolutions);
}
@if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != breakpoint-get('no queries') {
@include breakpoint-set('no queries', $breakpoint-no-queries);
}
@if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != breakpoint-get('no query fallbacks') {
@include breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks);
}
@if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != breakpoint-get('base font size') {
@include breakpoint-set('base font size', $breakpoint-base-font-size);
}
@if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != breakpoint-get('legacy syntax') {
@include breakpoint-set('legacy syntax', $breakpoint-legacy-syntax);
}
}
\ No newline at end of file
@function breakpoint-no-query($query) {
@if type-of($query) == 'list' {
$keyword: nth($query, 1);
@if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') {
@return nth($query, 2);
}
@else {
@return false;
}
}
@else {
@return false;
}
}
//////////////////////////////
// Import Parser Pieces
//////////////////////////////
@import "parsers/query";
@import "parsers/single";
@import "parsers/double";
@import "parsers/triple";
@import "parsers/resolution";
$Memo-Exists: function-exists(memo-get) and function-exists(memo-set);
//////////////////////////////
// Breakpoint Function
//////////////////////////////
@function breakpoint($query, $contexts...) {
$run: true;
$return: ();
// Grab the Memo Output if Memoization can be a thing
@if $Memo-Exists {
$return: memo-get(breakpoint, breakpoint $query $contexts);
@if $return != null {
$run: false;
}
}
@if not $Memo-Exists or $run {
// Internal Variables
$query-string: '';
$query-fallback: false;
$return: ();
// Reserve Global Private Breakpoint Context
$holder-context: $private-breakpoint-context-holder;
$holder-query-count: $private-breakpoint-query-count;
// Reset Global Private Breakpoint Context
$private-breakpoint-context-holder: () !global;
$private-breakpoint-query-count: 0 !global;
// Test to see if it's a comma-separated list
$or-list: if(list-separator($query) == 'comma', true, false);
@if ($or-list == false and breakpoint-get('legacy syntax') == false) {
$query-string: breakpoint-parse($query);
}
@else {
$length: length($query);
$last: nth($query, $length);
$query-fallback: breakpoint-no-query($last);
@if ($query-fallback != false) {
$length: $length - 1;
}
@if (breakpoint-get('legacy syntax') == true) {
$mq: ();
@for $i from 1 through $length {
$mq: append($mq, nth($query, $i), comma);
}
$query-string: breakpoint-parse($mq);
}
@else {
$query-string: '';
@for $i from 1 through $length {
$query-string: $query-string + if($i == 1, '', ', ') + breakpoint-parse(nth($query, $i));
}
}
}
$return: ('query': $query-string,
'fallback': $query-fallback,
'context holder': $private-breakpoint-context-holder,
'query count': $private-breakpoint-query-count
);
@if length($contexts) > 0 and nth($contexts, 1) != false {
@if $query-fallback != false {
$context-setter: private-breakpoint-set-context('no-query', $query-fallback);
}
$context-map: ();
@each $context in $contexts {
$context-map: map-merge($context-map, ($context: breakpoint-get-context($context)));
}
$return: map-merge($return, (context: $context-map));
}
// Reset Global Private Breakpoint Context
$private-breakpoint-context-holder: () !global;
$private-breakpoint-query-count: 0 !global;
@if $Memo-Exists {
$holder: memo-set(breakpoint, breakpoint $query $contexts, $return);
}
}
@return $return;
}
//////////////////////////////
// General Breakpoint Parser
//////////////////////////////
@function breakpoint-parse($query) {
// Increase number of 'and' queries
$private-breakpoint-query-count: $private-breakpoint-query-count + 1 !global;
// Set up Media Type
$query-print: '';
$force-all: ((breakpoint-get('force all media type') == true) and (breakpoint-get('default media') == 'all'));
$empty-media: true;
@if ($force-all == true) or (breakpoint-get('default media') != 'all') {
// Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
$query-print: breakpoint-get('default media');
$empty-media: false;
}
$query-resolution: false;
$query-holder: breakpoint-parse-query($query);
// Loop over each parsed out query and write it to $query-print
$first: true;
@each $feature in $query-holder {
$length: length($feature);
// Parse a single feature
@if ($length == 1) {
// Feature is currently a list, grab the actual value
$feature: nth($feature, 1);
// Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type
@if (breakpoint-is-media($feature)) {
@if ($force-all == true) or ($feature != 'all') {
// Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
$query-print: $feature;
$empty-media: false;
// Set Context
$context-setter: private-breakpoint-set-context(media, $query-print);
}
}
@else {
$parsed: breakpoint-parse-single($feature, $empty-media, $first);
$query-print: '#{$query-print} #{$parsed}';
$first: false;
}
}
// Parse a double feature
@else if ($length == 2) {
@if (breakpoint-is-resolution($feature) != false) {
$query-resolution: $feature;
}
@else {
$parsed: null;
// If it's a string/number pair,
// we check to see if one is a single-string value,
// then we parse it as a normal double
$alpha: nth($feature, 1);
$beta: nth($feature, 2);
@if breakpoint-single-string($alpha) or breakpoint-single-string($beta) {
$parsed: breakpoint-parse-single($alpha, $empty-media, $first);
$query-print: '#{$query-print} #{$parsed}';
$first: false;
$parsed: breakpoint-parse-single($beta, $empty-media, $first);
$query-print: '#{$query-print} #{$parsed}';
}
@else {
$parsed: breakpoint-parse-double($feature, $empty-media, $first);
$query-print: '#{$query-print} #{$parsed}';
$first: false;
}
}
}
// Parse a triple feature
@else if ($length == 3) {
$parsed: breakpoint-parse-triple($feature, $empty-media, $first);
$query-print: '#{$query-print} #{$parsed}';
$first: false;
}
}
@if ($query-resolution != false) {
$query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first);
}
// Loop through each feature that's been detected so far and append 'false' to the the value list to increment their counters
@each $f, $v in $private-breakpoint-context-holder {
$v-holder: $v;
$length: length($v-holder);
@if length($v-holder) < $private-breakpoint-query-count {
@for $i from $length to $private-breakpoint-query-count {
@if $f == 'media' {
$v-holder: append($v-holder, breakpoint-get('default media'));
}
@else {
$v-holder: append($v-holder, false);
}
}
}
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($f: $v-holder)) !global;
}
@return $query-print;
}
////////////////////////
// Default the Breakpoints variable
////////////////////////
$breakpoints: () !default;
$BREAKPOINTS: () !default;
////////////////////////
// Respond-to API Mixin
////////////////////////
@mixin respond-to($context, $no-query: false) {
@if length($breakpoints) > 0 and length($BREAKPOINTS) == 0 {
@warn "In order to avoid variable namespace collisions, we have updated the way to add breakpoints for respond-to. Please change all instances of `$breakpoints: add-breakpoint()` to `@include add-breakpoint()`. The `add-breakpoint()` function will be deprecated in a future release.";
$BREAKPOINTS: $breakpoints !global;
$breakpoints: () !global;
}
@if type-of($BREAKPOINTS) != 'map' {
// Just in case someone writes gibberish to the $breakpoints variable.
@warn "Your breakpoints aren't a map! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
@content;
}
@else if map-has-key($BREAKPOINTS, $context) {
@include breakpoint(map-get($BREAKPOINTS, $context), $no-query) {
@content;
}
}
@else if not map-has-key($BREAKPOINTS, $context) {
@warn "`#{$context}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$context}`, $value);`";
@content;
}
@else {
@warn "You haven't created any breakpoints yet! Make some already! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
@content;
}
}
//////////////////////////////
// Add Breakpoint to Breakpoints
// TODO: Remove function in next release
//////////////////////////////
@function add-breakpoint($name, $bkpt, $overwrite: false) {
$output: ($name: $bkpt);
@if length($breakpoints) == 0 {
@return $output;
}
@else {
@if map-has-key($breakpoints, $name) and $overwrite != true {
@warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
@return $breakpoints;
}
@else if not map-has-key($breakpoints, $name) or $overwrite == true {
@return map-merge($breakpoints, $output);
}
}
}
@mixin add-breakpoint($name, $bkpt, $overwrite: false) {
$output: ($name: $bkpt);
@if length($BREAKPOINTS) == 0 {
$BREAKPOINTS: $output !global;
}
@else {
@if map-has-key($BREAKPOINTS, $name) and $overwrite != true {
@warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
$BREAKPOINTS: $BREAKPOINTS !global;
}
@else if not map-has-key($BREAKPOINTS, $name) or $overwrite == true {
$BREAKPOINTS: map-merge($BREAKPOINTS, $output) !global;
}
}
}
\ No newline at end of file
//////////////////////////////
// Has Setting
//////////////////////////////
@function breakpoint-has($setting) {
@if map-has-key($breakpoint, $setting) {
@return true;
}
@else {
@return false;
}
}
//////////////////////////////
// Get Settings
//////////////////////////////
@function breakpoint-get($setting) {
@if breakpoint-has($setting) {
@return map-get($breakpoint, $setting);
}
@else {
@return map-get($Breakpoint-Settings, $setting);
}
}
//////////////////////////////
// Set Settings
//////////////////////////////
@function breakpoint-set($setting, $value) {
@if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
@warn "Words in Breakpoint settings should be separated by spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
}
$breakpoint: map-merge($breakpoint, ($setting: $value)) !global;
@return true;
}
@mixin breakpoint-change($setting, $value) {
$breakpoint-change: breakpoint-set($setting, $value);
}
@mixin breakpoint-set($setting, $value) {
@include breakpoint-change($setting, $value);
}
@mixin bkpt-change($setting, $value) {
@include breakpoint-change($setting, $value);
}
@mixin bkpt-set($setting, $value) {
@include breakpoint-change($setting, $value);
}
//////////////////////////////
// Remove Setting
//////////////////////////////
@function breakpoint-reset($settings...) {
@if length($settings) == 1 {
$settings: nth($settings, 1);
}
@each $setting in $settings {
$breakpoint: map-remove($breakpoint, $setting) !global;
}
@return true;
}
@mixin breakpoint-reset($settings...) {
$breakpoint-reset: breakpoint-reset($settings);
}
@mixin bkpt-reset($settings...) {
$breakpoint-reset: breakpoint-reset($settings);
}
\ No newline at end of file
//////////////////////////////
// Import Pieces
//////////////////////////////
@import "double/default-pair";
@import "double/double-string";
@import "double/default";
@function breakpoint-parse-double($feature, $empty-media, $first) {
$parsed: '';
$leader: '';
// If we're forcing
@if not ($empty-media) or not ($first) {
$leader: 'and ';
}
$first: nth($feature, 1);
$second: nth($feature, 2);
// If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number
@if type-of($first) == 'number' and type-of($second) == 'number' {
$parsed: breakpoint-parse-default-pair($first, $second);
}
// If they are both strings, we send it through the string parser
@else if type-of($first) == 'string' and type-of($second) == 'string' {
$parsed: breakpoint-parse-double-string($first, $second);
}
// If it's a string/number pair, we parse it as a normal double
@else {
$parsed: breakpoint-parse-double-default($first, $second);
}
@return $leader + $parsed;
}
@function breakpoint-parse-query($query) {
// Parse features out of an individual query
$feature-holder: ();
$query-holder: ();
$length: length($query);
@if $length == 2 {
// If we've got a string/number, number/string, check to see if it's a valid string/number pair or two singles
@if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') or (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'string') {
$number: '';
$value: '';
@if type-of(nth($query, 1)) == 'string' {
$number: nth($query, 2);
$value: nth($query, 1);
}
@else {
$number: nth($query, 1);
$value: nth($query, 2);
}
// If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy.
@if breakpoint-single-string($value) {
@if unitless($number) {
$feature-holder: append($value, $number, space);
$query-holder: append($query-holder, $feature-holder, comma);
@return $query-holder;
}
}
// If the string is a media type, split the query
@if breakpoint-is-media($value) {
$query-holder: append($query-holder, nth($query, 1));
$query-holder: append($query-holder, nth($query, 2));
@return $query-holder;
}
// If it's not a single feature, we're just going to assume it's a proper string/value pair, and roll with it.
@else {
$feature-holder: append($value, $number, space);
$query-holder: append($query-holder, $feature-holder, comma);
@return $query-holder;
}
}
// If they're both numbers, we assume it's a double and roll with that
@else if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') {
$feature-holder: append(nth($query, 1), nth($query, 2), space);
$query-holder: append($query-holder, $feature-holder, comma);
@return $query-holder;
}
// If they're both strings and neither are singles, we roll with that.
@else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') {
@if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) {
$feature-holder: append(nth($query, 1), nth($query, 2), space);
$query-holder: append($query-holder, $feature-holder, comma);
@return $query-holder;
}
}
}
@else if $length == 3 {
// If we've got three items and none is a list, we check to see
@if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' {
// If none of the items are single string values and none of the values are media values, we're good.
@if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) {
$feature-holder: append(nth($query, 1), nth($query, 2), space);
$feature-holder: append($feature-holder, nth($query, 3), space);
$query-holder: append($query-holder, $feature-holder, comma);
@return $query-holder;
}
// let's check to see if the first item is a media type
@else if breakpoint-is-media(nth($query, 1)) {
$query-holder: append($query-holder, nth($query, 1));
$feature-holder: append(nth($query, 2), nth($query, 3), space);
$query-holder: append($query-holder, $feature-holder);
@return $query-holder;
}
}
}
// If it's a single item, or if it's not a special case double or triple, we can simply return the query.
@return $query;
}
@import "resolution/resolution";
@function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) {
$leader: '';
// If we're forcing
@if not ($empty-media) or not ($first) {
$leader: 'and ';
}
@if breakpoint-get('transform resolutions') and $query-resolution {
$resolutions: breakpoint-make-resolutions($query-resolution);
$length: length($resolutions);
$query-holder: '';
@for $i from 1 through $length {
$query: '#{$query-print} #{$leader}#{nth($resolutions, $i)}';
@if $i == 1 {
$query-holder: $query;
}
@else {
$query-holder: '#{$query-holder}, #{$query}';
}
}
@return $query-holder;
}
@else {
// Return with attached resolution
@return $query-print;
}
}
//////////////////////////////
// Import Pieces
//////////////////////////////
@import "single/default";
@function breakpoint-parse-single($feature, $empty-media, $first) {
$parsed: '';
$leader: '';
// If we're forcing
@if not ($empty-media) or not ($first) {
$leader: 'and ';
}
// If it's a single feature that can stand alone, we let it
@if (breakpoint-single-string($feature)) {
$parsed: $feature;
// Set Context
$context-setter: private-breakpoint-set-context($feature, $feature);
}
// If it's not a stand alone feature, we pass it off to the default handler.
@else {
$parsed: breakpoint-parse-default($feature);
}
@return $leader + '(' + $parsed + ')';
}
//////////////////////////////
// Import Pieces
//////////////////////////////
@import "triple/default";
@function breakpoint-parse-triple($feature, $empty-media, $first) {
$parsed: '';
$leader: '';
// If we're forcing
@if not ($empty-media) or not ($first) {
$leader: 'and ';
}
// separate the string features from the value numbers
$string: null;
$numbers: null;
@each $val in $feature {
@if type-of($val) == string {
$string: $val;
}
@else {
@if type-of($numbers) == 'null' {
$numbers: $val;
}
@else {
$numbers: append($numbers, $val);
}
}
}
$parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2));
@return $leader + $parsed;
}
@function breakpoint-parse-default-pair($first, $second) {
$default: breakpoint-get('default pair');
$min: '';
$max: '';
// Sort into min and max
$min: min($first, $second);
$max: max($first, $second);
// Set Context
$context-setter: private-breakpoint-set-context(min-#{$default}, $min);
$context-setter: private-breakpoint-set-context(max-#{$default}, $max);
// Make them EMs if need be
@if (breakpoint-get('to ems') == true) {
$min: breakpoint-to-base-em($min);
$max: breakpoint-to-base-em($max);
}
@return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})';
}
@function breakpoint-parse-double-default($first, $second) {
$feature: '';
$value: '';
@if type-of($first) == 'string' {
$feature: $first;
$value: $second;
}
@else {
$feature: $second;
$value: $first;
}
// Set Context
$context-setter: private-breakpoint-set-context($feature, $value);
@if (breakpoint-get('to ems') == true) {
$value: breakpoint-to-base-em($value);
}
@return '(#{$feature}: #{$value})'
}
@function breakpoint-parse-double-string($first, $second) {
$feature: '';
$value: '';
// Test to see which is the feature and which is the value
@if (breakpoint-string-value($first) == true) {
$feature: $first;
$value: $second;
}
@else {
$feature: $second;
$value: $first;
}
// Set Context
$context-setter: private-breakpoint-set-context($feature, $value);
@return '(#{$feature}: #{$value})';
}
@function breakpoint-make-resolutions($resolution) {
$length: length($resolution);
$output: ();
@if $length == 2 {
$feature: '';
$value: '';
// Find which is number
@if type-of(nth($resolution, 1)) == 'number' {
$value: nth($resolution, 1);
}
@else {
$value: nth($resolution, 2);
}
// Determine min/max/standard
@if index($resolution, 'min-resolution') {
$feature: 'min-';
}
@else if index($resolution, 'max-resolution') {
$feature: 'max-';
}
$standard: '(#{$feature}resolution: #{$value})';
// If we're not dealing with dppx,
@if unit($value) != 'dppx' {
$base: 96dpi;
@if unit($value) == 'dpcm' {
$base: 243.84dpcm;
}
// Write out feature tests
$webkit: '';
$moz: '';
$webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})';
$moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})';
// Append to output
$output: append($output, $standard, space);
$output: append($output, $webkit, space);
$output: append($output, $moz, space);
}
@else {
$webkit: '';
$moz: '';
$webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})';
$moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})';
$fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})';
// Append to output
$output: append($output, $standard, space);
$output: append($output, $webkit, space);
$output: append($output, $moz, space);
$output: append($output, $fallback, space);
}
}
@return $output;
}
@function breakpoint-parse-default($feature) {
$default: breakpoint-get('default feature');
// Set Context
$context-setter: private-breakpoint-set-context($default, $feature);
@if (breakpoint-get('to ems') == true) and (type-of($feature) == 'number') {
@return '#{$default}: #{breakpoint-to-base-em($feature)}';
}
@else {
@return '#{$default}: #{$feature}';
}
}
@function breakpoint-parse-triple-default($feature, $first, $second) {
// Sort into min and max
$min: min($first, $second);
$max: max($first, $second);
// Set Context
$context-setter: private-breakpoint-set-context(min-#{$feature}, $min);
$context-setter: private-breakpoint-set-context(max-#{$feature}, $max);
// Make them EMs if need be
@if (breakpoint-get('to ems') == true) {
$min: breakpoint-to-base-em($min);
$max: breakpoint-to-base-em($max);
}
@return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})';
}
// Su
// ==
@import 'susy/su';
// Susy
// ====
@import 'susy/language/susy';
// Susy
// ====
@import 'susy/language/susyone';
// Su
// ==
@import "su/utilities";
@import "su/settings";
@import "su/validation";
@import "su/grid";
// Susy Next Syntax
// ================
$susy-version: 2.1;
@import "../su";
@import "../output/float";
@import "susy/settings";
@import "susy/validation";
@import "susy/grids";
@import "susy/box-sizing";
@import "susy/context";
@import "susy/background";
@import "susy/container";
@import "susy/span";
@import "susy/gutters";
@import "susy/isolate";
@import "susy/gallery";
@import "susy/rows";
@import "susy/margins";
@import "susy/padding";
@import "susy/bleed";
@import "susy/breakpoint-plugin";
// ---------------------------------------------------------------------------
// Partials
$susy-version: 1.5;
@import "susyone/settings";
@import "susyone/functions";
@import "susyone/grid";
@import "susyone/isolation";
@import "susyone/padding";
@import "susyone/margin";
@import "susyone/media";
@import "susyone/background";
// Background Grid Syntax
// ======================
$susy-overlay-grid-head-exists: false;
// Show Grid/s
// -----------
// Show grid on any element using either background or overlay.
// - [$grid] : <settings>
@mixin show-grid(
$grid: $susy
) {
$inspect: $grid;
$_output: debug-get(output, $grid);
@include susy-inspect(show-grid, $inspect);
@if $_output == overlay {
@include overlay-grid($grid);
} @else {
@include background-grid($grid);
}
}
@mixin show-grids(
$grid: $susy
) {
@include show-grid($grid);
}
// Background Grid
// ---------------
// Show a grid background on any element.
// - [$grid] : <settings>
@mixin background-grid(
$grid: $susy
) {
$inspect : $grid;
$_output : get-background($grid);
@if length($_output) > 0 {
$_flow: susy-get(flow, $grid);
$_image: ();
@each $name, $layer in map-get($_output, image) {
$_direction: if($name == baseline, to bottom, to to($_flow));
$_image: append($_image, linear-gradient($_direction, $layer), comma);
}
$_output: map-merge($_output, (image: $_image));
@include background-grid-output($_output...);
@include susy-inspect(background-grid, $inspect);
}
}
// Overlay Grid
// ------------
// Generate an icon to trigger grid-overlays on any given elements.
// $grids... : <selector> [<settings>] [, <selector>]*
@mixin overlay-grid (
$grid: $susy
) {
@if not($susy-overlay-grid-head-exists) {
@at-root head { @include overlay-head; }
@at-root head:before { @include overlay-trigger; }
@at-root head:hover { @include overlay-trigger-hover; }
$susy-overlay-grid-head-exists: true !global;
}
head:hover ~ &,
head:hover ~ body & {
position: relative;
&:before {
@include grid-overlay-base;
@include background-grid($grid);
}
}
}
// [Private] Overlay Trigger
// -------------------------
@mixin overlay-trigger {
content: "|||";
display: block;
padding: 5px 10px;
font: {
family: sans-serif;
size: 16px;
weight: bold;
}
}
// [Private] Overlay Trigger Hover
// -------------------------------
@mixin overlay-trigger-hover {
background: rgba(white, .5);
color: red;
}
// [Private] Overlay Head
// ----------------------
// <head> styles to create grid overlay toggle
@mixin overlay-head {
$_toggle: debug-get(toggle);
$_horz: null;
$_vert: null;
@each $side in $_toggle {
$_horz: if($side == left or $side == right, $side, $_horz);
$_vert: if($side == top or $side == bottom, $side, $_vert);
}
display: block;
position: fixed;
#{$_horz}: 10px;
#{$_vert}: 10px;
z-index: 999;
color: #333;
background: rgba(white, .25);
}
// [Private] Grid Overlay Base
// ---------------------------
// Base styles for generating a grid overlay
@mixin grid-overlay-base() {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
}
// Get Symmetrical Background
// --------------------------
// - $grid: <map>
@function get-background-sym(
$grid
) {
$grid : parse-grid($grid);
$_gutters : susy-get(gutters, $grid);
$_column-width : susy-get(column-width, $grid);
$_math : susy-get(math, $grid);
$_color : debug-get(color);
$_trans : transparent;
$_light : lighten($_color, 15%);
$_end : 1 + $_gutters;
$_after : percentage(1/$_end);
$_stops : ();
$_size : span(1 $grid wide);
@if is-inside($grid) {
$_stops: $_color, $_light;
} @else if is-split($grid) {
$_split: $_gutters/2;
$_before: percentage($_split/$_end);
$_after: percentage((1 + $_split)/$_end);
$_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after;
} @else {
$_stops: $_color, $_light $_after, $_trans $_after;
}
@if $_math == static {
$_size: valid-column-math($_math, $_column-width) * $_end;
}
$_output: (
image: (columns: $_stops),
size: $_size,
);
@return $_output;
}
// Get Asymmetrical Inside
// -----------------------
// - $grid: <settings>
@function get-asym-inside(
$grid
) {
$grid : parse-grid($grid);
$_columns : susy-get(columns, $grid);
$_color : debug-get(color);
$_light : lighten($_color, 15%);
$_stops : ();
@for $location from 1 through susy-count($_columns) {
$this-stop: ();
@if $location == 1 {
$this-stop: append($this-stop, $_color, comma);
} @else {
$start: parse-span(1 at $location $grid);
$start: get-isolation($start);
$this-stop: append($this-stop, $_color $start, comma);
}
@if $location == susy-count($_columns) {
$this-stop: append($this-stop, $_light, comma);
} @else {
$_end: parse-span(1 at ($location + 1) $grid);
$_end: get-isolation($_end);
$this-stop: append($this-stop, $_light $_end, comma);
}
$_stops: join($_stops, $this-stop, comma);
}
@return $_stops;
}
// Get Asymmetrical Split
// ----------------------
// - $grid: <settings>
@function get-asym-split(
$grid
) {
$grid : parse-grid($grid);
$_columns : susy-get(columns, $grid);
$_color : debug-get(color);
$_light : lighten($_color, 15%);
$_stops : ();
@for $location from 1 through susy-count($_columns) {
$this-stop: ();
$start: parse-span(1 at $location $grid);
$start: get-isolation($start);
$this-stop: append($this-stop, transparent $start, comma);
$this-stop: append($this-stop, $_color $start, comma);
$_end: $start + span(1 at $location $grid);
$this-stop: append($this-stop, $_light $_end, comma);
$this-stop: append($this-stop, transparent $_end, comma);
$_stops: join($_stops, $this-stop, comma);
}
@return $_stops;
}
// Get Asymmetrical Outside
// ------------------------
// - $grid: <settings>
@function get-asym-outside(
$grid
) {
$grid : parse-grid($grid);
$_columns : susy-get(columns, $grid);
$_color : debug-get(color);
$_light : lighten($_color, 15%);
$_trans : transparent;
$_stops : ();
@for $location from 1 through susy-count($_columns) {
$this-stop: ();
@if $location == 1 {
$this-stop: append($this-stop, $_color, comma);
} @else {
$start: parse-span(1 at $location $grid);
$start: get-isolation($start);
$this-stop: append($this-stop, $_color $start, comma);
}
@if $location == susy-count($_columns) {
$this-stop: append($this-stop, $_light, comma);
} @else {
$gutter: get-span-width(first $location $grid);
$_end: parse-span(1 at ($location + 1) $grid);
$_end: get-isolation($_end);
$gutter: $_light $gutter, $_trans $gutter, $_trans $_end;
$this-stop: join($this-stop, $gutter, comma);
}
$_stops: join($_stops, $this-stop, comma);
}
@return $_stops;
}
// Get Asymmetrical Background
// ---------------------------
// - $grid: <settings>
@function get-background-asym(
$grid
) {
$_stops: ();
@if is-inside($grid) {
$_stops: get-asym-inside($grid);
} @else if is-split($grid) {
$_stops: get-asym-split($grid);
} @else {
$_stops: get-asym-outside($grid);
}
@return (image: (columns: $_stops));
}
// Get Background
// --------------
// - $grid: <settings>
@function get-background(
$grid
) {
$grid : parse-grid($grid);
$_show : susy-get(debug image, $grid);
$_return : ();
@if $_show and $_show != hide {
$_line-height: variable-exists(base-line-height);
$_line-height: if($_line-height, $base-line-height, false);
$_columns: susy-get(columns, $grid);
@if $_show != show-baseline {
$_sym: is-symmetrical($_columns);
$_return: if($_sym, get-background-sym($grid), get-background-asym($grid));
$_return: map-merge($_return, (clip: content-box));
} @else if not($_line-height) {
@warn 'Please provide $base-line-height in order to see baseline grids.';
}
@if $_line-height {
@if $_show != show-columns {
$_color: variable-exists(grid-background-baseline-color);
$_color: if($_color, $grid-background-baseline-color, #000);
$_image: map-get($_return, image);
$_size: map-get($_return, size);
$_baseline: (baseline: ($_color 1px, transparent 1px));
$_baseline-size: 100% $_line-height;
$_return: map-merge($_return, (
image: if($_image, map-merge($_image, $_baseline), $_baseline),
size: if($_size, ($_size, $_baseline-size), $_baseline-size),
));
}
@if $_show == show {
$_clip: map-get($_return, clip);
$_return: map-merge($_return, (clip: join($_clip, border-box, comma)));
}
}
}
@if map-get($_return, image) {
$_return: map-merge($_return, (flow: susy-get(flow, $grid)));
}
@return $_return;
}
// Get Debug
// ---------
// Return the value of a debug setting
// - $key: <setting>
@function debug-get(
$key,
$grid: $susy
) {
$key: join(debug, $key, space);
@return susy-get($key, $grid);
}
// Bleed Syntax
// ============
// Bleed
// -----
// Add negative margins, and equal positive padding to create bleed.
// - $bleed : <span>
@mixin bleed(
$bleed: 0 gutter()
) {
$inspect : $bleed;
$output : get-bleed($bleed);
@if susy-get(global-box-sizing) != content-box {
$output: map-merge((box-sizing: content-box), $output);
}
@include susy-inspect(bleed, $inspect);
@include output($output);
}
// Bleed-x
// -------
// Shortcut for horizontal bleed.
// - $bleed : <span>
@mixin bleed-x(
$bleed: gutter()
) {
$bleed : parse-span($bleed);
$trbl : susy-get(span, $bleed);
@if length($trbl) == 1 {
$bleed: map-merge($bleed, (span: 0 nth($trbl, 1)));
} @else if length($trbl) == 2 {
$bleed: map-merge($bleed, (span: 0 nth($trbl, 2) 0 nth($trbl, 1)));
} @else {
@warn 'bleed-x only takes 2 lengths, but #{length($trbl)} were passed.';
}
@include bleed($bleed);
}
// Bleed-y
// -------
// Shortcut for vertical bleed.
// - $bleed : <span>
@mixin bleed-y(
$bleed: if(function-exists(rhythm), rhythm(1), 1em)
) {
$bleed : parse-span($bleed);
$trbl : susy-get(span, $bleed);
@if length($trbl) == 1 {
$bleed: map-merge($bleed, (span: nth($trbl, 1) 0));
} @else if length($trbl) == 2 {
$bleed: map-merge($bleed, (span: nth($trbl, 1) 0 nth($trbl, 2) 0));
} @else {
@warn 'bleed-y only takes 2 lengths, but #{length($trbl)} were passed.';
}
@include bleed($bleed);
}
// Get Bleed
// ---------
// Return bleed output values
// - $bleed: <span>
@function get-bleed(
$bleed
) {
$bleed : map-merge((spread: wide), parse-span($bleed));
$trbl : susy-get(span, $bleed);
$short : null;
$output : ();
@for $i from 1 through length($trbl) {
$this: nth($trbl, $i);
$new: ();
$margin: null;
$padding: null;
$padding-x: null;
@if $this > 0 {
$this: map-merge($bleed, (span: $this));
$margin: span($this);
$padding: $margin;
$padding-x: $padding;
}
@if $margin and $margin > 0 {
$margin: - $margin;
@if is-inside($this) {
$gutter: gutter($this);
$join: if($gutter and comparable($padding, $gutter), true, false);
$padding-x: if($join and $padding > 0, $padding + $gutter, $padding);
}
}
@if $i == 1 {
$new: (
margin-top: $margin,
padding-top: $padding,
margin-right: $margin,
padding-right: $padding-x,
margin-bottom: $margin,
padding-bottom: $padding,
margin-left: $margin,
padding-left: $padding-x,
);
} @else if $i == 2 {
$new: (
margin-right: $margin,
padding-right: $padding-x,
margin-left: $margin,
padding-left: $padding-x,
);
} @else if $i == 3 {
$new: (
margin-bottom: $margin,
padding-bottom: $padding,
);
} @else if $i == 4 {
$new: (
margin-left: $margin,
padding-left: $padding-x,
);
}
$output: map-merge($output, $new);
}
@each $prop, $value in $output {
$output: if($value == 0, map-merge($output, ($prop: null)), $output);
}
@return bleed-shorthand($output);
}
// Bleed Shorthand
// ---------------
// Convert bleed output into shorthand when possible.
// - $bleed: <output map>
@function bleed-shorthand(
$bleed
) {
$margin: ();
$padding: ();
$return: ();
@each $key, $value in $bleed {
@if str-index($key, margin) {
$margin: map-merge($margin, ($key: $value));
} @else if str-index($key, padding) > 0 {
$padding: map-merge($padding, ($key: $value));
}
}
$props: (
margin: $margin,
padding: $padding,
);
@each $name, $map in $props {
$four: if(length(map-keys($map)) == 4, true, false);
$null: if(index(map-values($map), null), true, false);
@if $four and not($null) {
$top: map-get($map, '#{$name}-top');
$right: map-get($map, '#{$name}-right');
$bottom: map-get($map, '#{$name}-bottom');
$left: map-get($map, '#{$name}-left');
$tb: if($top == $bottom, $top, null);
$rl: if($right == $left, $right, null);
$all: if($tb == $rl, $tb, null);
$new: if($all, $all, null);
@if not($new) {
@if $tb and $rl {
$new: $tb $rl;
} @else if $rl {
$new: $top $rl $bottom;
} @else {
$new: $top $right $bottom $left;
}
}
$return: map-merge($return, ($name: $new));
} @else {
$return: map-merge($return, $map);
}
}
@return $return;
}
// Susy Box Sizing
// =================
// Global Box Sizing
// -----------------
// Set a box model globally on all elements.
// - [$box]: border-box | content-box
// - [$inherit]: true | false
@mixin global-box-sizing(
$box: susy-get(global-box-sizing),
$inherit: false
) {
$inspect: $box;
@if $inherit {
@at-root {
html { @include output((box-sizing: $box)); }
*, *:before, *:after { box-sizing: inherit; }
}
} @else {
*, *:before, *:after { @include output((box-sizing: $box)); }
}
@include susy-inspect(global-box-sizing, $inspect);
@include update-box-model($box);
}
// Border Box Sizing
// -----------------
// A legacy shortcut...
// - [$inherit]: true | false
@mixin border-box-sizing(
$inherit: false
) {
@include global-box-sizing(border-box, $inherit);
}
// Update Box Model
// ----------------
// PRIVATE: Updates global box model setting
@mixin update-box-model(
$box
) {
@if $box != susy-get(global-box-sizing) {
@include susy-set(global-box-sizing, $box);
}
}
// Breakpoint Integration
// ======================
$susy-media: () !default;
$susy-media-fallback: false !default;
$_susy-media-context: ();
// Susy Breakpoint
// ---------------
// Change grids at different media query breakpoints.
// - $query : <min-width> [<max-width>] | <property> <value> | <map>
// - $layout : <settings>
// - $no-query : <boolean> | <selector>
@mixin susy-breakpoint(
$query,
$layout: false,
$no-query: $susy-media-fallback
) {
@include susy-media-router($query, $no-query) {
@if $layout {
@include with-layout($layout) {
@content;
}
} @else {
@content;
}
}
}
// Susy Media
// ----------
// - $query: <min-width> [<max-width>] | <property> <value>
// - $no-query: <boolean> | <selector>
@mixin susy-media(
$query,
$no-query: $susy-media-fallback
) {
$old-context: $_susy-media-context;
$name: if(map-has-key($susy-media, $query), $query, null);
$query: susy-get-media($query);
$query: susy-parse-media($query);
@include susy-media-context($query, $name);
@if $no-query and type-of($no-query) != string {
@content;
} @else {
@media #{susy-render-media($query)} {
@content;
}
@if type-of($no-query) == string {
#{$no-query} & {
@content;
}
}
}
@include susy-media-context($old-context, $clean: true);
}
// Media Router
// ------------
// Rout media arguments to the correct mixin.
@mixin susy-media-router(
$query,
$no-query: $susy-media-fallback
) {
@if susy-support(breakpoint, (mixin: breakpoint), $warn: false) {
@include breakpoint($query, $no-query) {
@content;
}
} @else {
@include susy-media($query, $no-query) {
@content;
}
}
}
// Update Context
// -------------
// Set the new media context
@mixin susy-media-context(
$query,
$name: null,
$clean: false
) {
$query: map-merge((name: $name), $query);
@if $clean {
$_susy-media-context: $query !global;
} @else {
$_susy-media-context: map-merge($_susy-media-context, $query) !global;
}
}
// Media Context
// -------------
// Return the full media context, or a single media property (e.g. min-width)
@function susy-media-context(
$property: false
) {
@if $property {
@return map-get($_susy-media-context, $property);
} @else {
@return $_susy-media-context;
}
}
// Get Media
// ---------
// Return a named media-query from $susy-media.
// - $name: <key>
@function susy-get-media(
$name
) {
@if map-has-key($susy-media, $name) {
$name: map-get($susy-media, $name);
$name: susy-get-media($name);
}
@return $name;
}
// Render Media
// ------------
// Build a media-query string from various media settings
@function susy-render-media(
$query
) {
$output: null;
@each $property, $value in $query {
$string: null;
@if $property == media {
$string: $value;
} @else {
$string: '(#{$property}: #{$value})';
}
$output: if($output, '#{$output} and #{$string}', $string);
}
@return $output;
}
// Parse Media
// -----------
// Return parsed media-query settings based on shorthand
@function susy-parse-media(
$query
) {
$mq: null;
@if type-of($query) == map {
$mq: $query;
} @else if type-of($query) == number {
$mq: (min-width: $query);
} @else if type-of($query) == list and length($query) == 2 {
@if type-of(nth($query, 1)) == number {
$mq: (
min-width: min($query...),
max-width: max($query...),
);
} @else {
$mq: (nth($query, 1): nth($query, 2));
}
} @else {
$mq: (media: '#{$query}');
}
@return $mq;
}
// Container Syntax
// ================
// Container [mixin]
// -----------------
// Set a container element
// - [$layout] : <settings>
@mixin container(
$layout: $susy
) {
$inspect : $layout;
$layout : parse-grid($layout);
$_width : get-container-width($layout);
$_justify : parse-container-position(susy-get(container-position, $layout));
$_property : if(susy-get(math, $layout) == static, width, max-width);
$_box : susy-get(box-sizing, $layout);
@if $_box {
@include output((box-sizing: $_box));
}
@include susy-inspect(container, $inspect);
@include float-container($_width, $_justify, $_property);
@include show-grid($layout);
}
// Container [function]
// --------------------
// Return container width
// - [$layout] : <settings>
@function container(
$layout: $susy
) {
$layout: parse-grid($layout);
@return get-container-width($layout);
}
// Get Container Width
// -------------------
// Calculate the container width
// - [$layout]: <settings>
@function get-container-width(
$layout: $susy
) {
$layout : parse-grid($layout);
$_width : susy-get(container, $layout);
$_column-width : susy-get(column-width, $layout);
$_math : susy-get(math, $layout);
@if not($_width) or $_width == auto {
@if valid-column-math($_math, $_column-width) {
$_columns : susy-get(columns, $layout);
$_gutters : susy-get(gutters, $layout);
$_spread : if(is-split($layout), wide, narrow);
$_width : susy-sum($_columns, $_gutters, $_spread) * $_column-width;
} @else {
$_width: 100%;
}
}
@return $_width;
}
// Parse Container Position
// ------------------------
// Parse the $container-position into margin values.
// - [$justify] : left | center | right | <length> [<length>]
@function parse-container-position(
$justify: map-get($susy-defaults, container-position)
) {
$_return: if($justify == left, 0, auto) if($justify == right, 0, auto);
@if not(index(left right center, $justify)) {
$_return: nth($justify, 1);
$_return: $_return if(length($justify) > 1, nth($justify, 2), $_return);
}
@return $_return;
}
// Context Syntax
// ==============
// Nested [function]
// -----------------
// Return a subset grid for nested context.
// - $context : <span>
@function nested(
$context
) {
$context : parse-span($context);
$span : susy-get(span, $context);
$location : get-location($context);
$columns : susy-get(columns, $context);
@return susy-slice($span, $location, $columns);
}
// Nested [mixin]
// --------------
// Use a subset grid for a nested context
// - $context : <span>
// - @content : <content>
@mixin nested(
$context
) {
$inspect : $context;
$context : parse-span($context);
$old : susy-get(columns);
$susy : map-merge($susy, (columns: nested($context))) !global;
@include susy-inspect(nested, $inspect);
@content;
$susy : map-merge($susy, (columns: $old)) !global;
}
// Gallery Syntax
// ==============
// Gallery
// -------
// Create an isolated gallery
// - $span : <span>
// - [$selector] : child | of-type
@mixin gallery(
$span,
$selector: child
) {
$inspect : $span;
$span : parse-span($span);
$span : map-merge($span, (location: 1));
$n : susy-get(span, $span);
$columns : susy-get(columns, $span);
$context : susy-count($columns);
$flow : susy-get(flow, $span);
$inside : is-inside($span);
$from : from($flow);
$line : floor($context / $n);
$symmetrical : is-symmetrical($columns);
$output: (
width : null,
float : from,
margin-before : null,
margin-after : null,
padding-before : null,
padding-after : null,
flow : $flow,
);
@if $inside {
$gutters: get-gutters($span);
$output: map-merge($output, (
padding-before: map-get($gutters, before),
padding-after: map-get($gutters, after),
));
}
@if $symmetrical {
$output: map-merge($output, (width: get-span-width($span)));
}
$box : susy-get(box-sizing, $span);
$global-box : if(susy-get(global-box-sizing) == 'border-box', true, false);
@include susy-inspect(gallery, $inspect);
// Collective Output
@if $box == border-box or ($inside and not($box) and not($global-box)) {
@include output((box-sizing: border-box));
} @else if $box == content-box {
@include output((box-sizing: content-box));
}
@include float-span-output($output...);
// Individual Loop
@for $item from 1 through $line {
$nth: '#{$line}n + #{$item}';
&:nth-#{$selector}(#{$nth}) {
// Individual Prep
$output: (
width : if($symmetrical, null, get-span-width($span)),
float : null,
margin-before : get-isolation($span),
margin-after : -100%,
padding-before : null,
padding-after : null,
flow : $flow,
);
// Individual Output
@include float-span-output($output...);
@if get-edge($span) == first {
@include break;
@include first($span);
} @else {
@include nobreak;
}
// Individual Location Increment
$location: get-location($span) + $n;
$location: if($location > $context, 1, $location);
$span: map-merge($span, (location: $location));
}
}
}
// Grid Syntax
// ===========
// Layout
// ------
// Set a new layout using a shorthand
// - $layout: <settings>
// - $clean: boolean
@mixin layout(
$layout,
$clean: false
) {
$inspect : $layout;
$susy : _get-layout($layout, $clean) !global;
@include susy-inspect(layout, $inspect);
}
// Use Grid
// --------
// Use an arbitrary layout for a section of code
// - $layout: <settings>
// - $clean: boolean
@mixin with-layout(
$layout,
$clean: false
) {
$inspect : $layout;
$old : $susy;
$susy : _get-layout($layout, $clean) !global;
@include susy-inspect(with-layout, $inspect);
@content;
$susy: $old !global;
}
// Layout
// ------
// Return a parsed layout map based on shorthand syntax
// - $layout: <settings>
@function layout(
$layout: $susy
) {
@return parse-grid($layout);
}
// Get Layout
// ----------
// Return a new layout based on current and given settings
// - $layout: <settings>
// - $clean: boolean
@function _get-layout(
$layout,
$clean: false
) {
$layout: layout($layout);
@return if($clean, $layout, _susy-deep-merge($susy, $layout));
}
// Gutter Syntax
// =============
// Gutters
// -------
// Set gutters on an element.
// - [$span] : <settings>
@mixin gutters(
$span: $susy
) {
$inspect : $span;
$span : parse-gutters($span);
$_gutters : get-gutters($span);
$_output: (
before: map-get($_gutters, before),
after: map-get($_gutters, after),
flow: susy-get(flow, $span),
);
@include susy-inspect(gutters, $inspect);
@if is-inside($span) {
@include padding-output($_output...);
} @else {
@include margin-output($_output...);
}
}
@mixin gutter(
$span: $susy
) {
@include gutters($span);
}
// Gutter
// ------
// Return the width of a gutter.
// - [$span] : <settings>
@function gutter(
$span: $susy
) {
$span: parse-gutters($span);
$_gutters: get-gutters($span);
$_gutters: map-get($_gutters, before) or map-get($_gutters, after);
@return $_gutters;
}
@function gutters(
$span: $susy
) {
@return gutter($span);
}
// Get Gutter Width
// ----------------
// Return gutter width.
// - [$context]: <context>
@function get-gutter-width(
$context: $susy
) {
$context : parse-gutters($context);
$_gutters : susy-get(gutters, $context);
$_gutter : susy-get(gutter-override, $context);
@if $_gutters and ($_gutters > 0) and not($_gutter) {
$_column-width: susy-get(column-width, $context);
$_math: gutter-math($context);
@if $_math == static {
$_gutter: $_gutters * valid-column-math($_math, $_column-width);
} @else {
$_columns : susy-get(columns, $context);
$_spread : if(is-split($context), wide, susy-get(spread, $context));
$_gutter : percentage($_gutters / susy-sum($_columns, $_gutters, $_spread));
}
}
$_gutter: if($_gutter == 'no-gutters' or $_gutter == 'no-gutter', null, $_gutter);
@return $_gutter;
}
// Get Gutters
// -----------
// Return before and after gutter values.
// - [$context]: <context>
@function get-gutters(
$context: $susy
) {
$context : parse-gutters($context);
$_gutter-position : susy-get(gutter-position, $context);
$_gutter : get-gutter-width($context);
$_return : (before: null, after: null);
@if is-split($context) and $_gutter {
$_gutter: $_gutter / 2;
$_return: map-merge($_return, (before: $_gutter, after: $_gutter));
} @else {
$_return: map-merge($_return, ($_gutter-position: $_gutter));
}
@return $_return;
}
// Is Inside
// ---------
// Returns true if gutters are inside.
// $context: <context>
@function is-inside(
$context
) {
$_inside: inside inside-static;
$_gutter-position: susy-get(gutter-position, $context);
@return if(index($_inside, $_gutter-position), true, false);
}
// Is Split
// --------
// Returns true if gutters are split.
// $context: <context>
@function is-split(
$context
) {
$_split: split inside inside-static;
$_gutter-position: susy-get(gutter-position, $context);
@return if(index($_split, $_gutter-position), true, false);
}
// Gutter Math
// -----------
// Return the math to use for gutter calculations
// $context: <context>
@function gutter-math(
$context: $susy
) {
$_return : susy-get(math, $context);
$_return : if(susy-get(gutter-position, $context) == inside-static, static, $_return);
@return $_return;
}
// Isolation Syntax
// ================
// Isolate [Mixin]
// ---------------
// Set isolation as an override.
// - $location: <span>
@mixin isolate(
$isolate: 1
) {
$inspect: $isolate;
$output: (
push: isolate($isolate),
flow: susy-get(flow, $isolate),
);
@include susy-inspect(isolate, $inspect);
@include isolate-output($output...);
}
// Isolate [function]
// ------------------
// Return an isolation offset width.
// - $location: <span>
@function isolate(
$isolate: 1
) {
$isolate: parse-span($isolate);
$isolation: susy-get(span, $isolate);
@if $isolation and not(get-location($isolate)) {
$new: (
span: null,
location: $isolation,
);
$isolate: map-merge($isolate, $new);
}
@return get-isolation($isolate);
}
// Get Isolation
// -------------
// Return the isolation offset width
// - $input: <map>
@function get-isolation(
$input
) {
$location : get-location($input);
$columns : susy-get(columns, $input);
$width : null;
@if type-of($location) == number and not(unitless($location)) {
$width: $location;
} @else if $location {
$push: $location - 1;
@if $push > 0 {
$push: map-merge($input, (
span: $push,
location: 1,
spread: wide,
));
$width: get-span-width($push);
}
}
@if susy-get(gutter-position, $input) == split {
$width: if($width == null, gutters($input), $width + gutters($input));
}
@return $width or 0;
}
// Margin Syntax
// =============
// Pre
// ---
// Add spanning-margins before an element.
// - $span : <span>
@mixin pre(
$span
) {
$inspect: $span;
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$split : if(susy-get(gutter-position, $span) == split, true, false);
$width : if($split, span($span) + gutter($span), span($span));
@include susy-inspect(pre, $inspect);
@include margin-output($width, null, $flow);
}
// Post
// ----
// Add spanning-margins after an element.
// - $span : <span>
@mixin post(
$span
) {
$inspect : $span;
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$split : if(susy-get(gutter-position, $span) == split, true, false);
$width : if($split, span($span) + gutter($span), span($span));
@include susy-inspect(post, $inspect);
@include margin-output(null, $width, $flow);
}
// Push
// ----
// Simple synonymn for pre.
// - $span : <span>
@mixin push(
$span
) {
@include pre($span);
}
// Pull
// ----
// Add negative spanning-margins before an element.
// - $span : <span>
@mixin pull(
$span
) {
$inspect : $span;
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$split : if(susy-get(gutter-position, $span) == split, true, false);
$width : if($split, 0 - span($span) + gutter($span), 0 - span($span));
@include susy-inspect(pull, $inspect);
@include margin-output($width, null, $flow);
}
// Squish
// ------
// Add spanning-margins before and after an element.
// - $pre : <span>
// - [$post] : <span>
@mixin squish(
$pre,
$post: false
) {
$inspect : $pre, $post;
$pre : map-merge((spread: wide), parse-span($pre));
@if $post {
$post: map-merge((spread: wide), parse-span($post));
} @else {
$span: susy-get(span, $pre);
@if length($span) > 1 {
$pre: map-merge($pre, (span: nth($span, 1)));
$post: map-merge($pre, (span: nth($span, 2)));
} @else {
$post: $pre;
}
}
@include susy-inspect(squish, $inspect...);
@include pre($pre);
@include post($post);
}
// Padding Syntax
// ==============
// Prefix
// ------
// Add spanning-padding before an element.
// - $span : <span>
@mixin prefix(
$span
) {
$inspect : $span;
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$width : span($span);
@if is-inside($span) {
$gutter: gutter($span);
$width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
}
@include susy-inspect(prefix, $inspect);
@include padding-output($width, null, $flow);
}
// Suffix
// ------
// Add spanning-padding after an element.
// - $span : <span>
@mixin suffix(
$span
) {
$inspect : $span;
$span : map-merge((spread: wide), parse-span($span));
$flow : susy-get(flow, $span);
$width : span($span);
@if is-inside($span) {
$gutter: gutter($span);
$width: if($gutter and comparable($width, $gutter), $width + $gutter, $width);
}
@include susy-inspect(suffix, $inspect);
@include padding-output(null, $width, $flow);
}
// Pad
// ---
// Add spanning-padding before and after an element.
// - $pre : <span>
// - [$post] : <span>
@mixin pad(
$pre,
$post: false
) {
$inspect : $pre, $post;
$pre : map-merge((spread: wide), parse-span($pre));
@if $post {
$post: map-merge((spread: wide), parse-span($post));
} @else {
$span: susy-get(span, $pre);
@if length($span) > 1 {
$pre: map-merge($pre, (span: nth($span, 1)));
$post: map-merge($pre, (span: nth($span, 2)));
} @else {
$post: $pre;
}
}
@include susy-inspect(pad, $inspect...);
@include prefix($pre);
@include suffix($post);
}
// Row Start & End
// ===============
// Break
// -----
// Apply to any element that should force a line break.
@mixin break {
@include output((clear: both));
}
// NoBreak
// -------
// Cancel the break() effect, e.g. when using media queries.
@mixin nobreak {
@include output((clear: none));
}
// Full
// ----
// - [$context]: <layout shorthand>
@mixin full(
$context: $susy
) {
$inspect : $context;
@include susy-inspect(full, $inspect);
@include span(full of parse-grid($context) break);
}
// First
// -----
// - [$context]: <settings>
@mixin first(
$context: $susy
) {
$inspect : $context;
$context : parse-grid($context);
$flow : susy-get(flow, $context);
@include susy-inspect(first, $inspect);
@if not(is-split($context)) {
@include float-first($flow);
}
}
@mixin alpha(
$context: $susy
) {
@include first($context);
}
// Last
// ----
// - [$context]: <settings>
@mixin last(
$context: $susy
) {
$inspect : $context;
$context : parse-grid($context);
@include susy-inspect(last, $inspect);
$output: (
flow: susy-get(flow, $context),
last-flow: susy-get(last-flow, $context),
margin: if(is-split($context), null, 0),
);
@include float-last($output...);
}
@mixin omega(
$context: $susy
) {
@include last($context);
}
// Get Edge
// --------
// Calculate edge value based on location, if possible
@function get-edge(
$span
) {
$span : parse-span($span);
$edge : susy-get(edge, $span);
@if not($edge) {
$count: susy-count(susy-get(columns, $span));
$location: susy-get(location, $span);
$n: susy-get(span, $span);
$number: if(type-of($location) == number, true, false);
$index: if($number and unitless($location), true, false);
@if $n == $count {
$edge: full;
} @else if $location and $n and $index {
@if $location == 1 {
$edge: if($n == $count, full, first);
} @else if $location + $n - 1 == $count {
$edge: last;
}
}
}
@if $edge == alpha or $edge == omega {
$edge: if($edge == alpha, first, last);
}
@return $edge;
}
// Get Location
// ------------
// Calculate location value based on edge, if possible
@function get-location(
$span
) {
$span : parse-span($span);
$location : susy-get(location, $span);
$edge : get-edge($span);
$n : susy-get(span, $span);
@if $edge and not($location) and type-of($n) == number and unitless($n) {
@if $edge == first {
$location: 1;
} @else if $edge == last {
$location: susy-count(susy-get(columns, $span)) - $n + 1;
}
}
@return $location
}
// Susy Settings
// =============
// Susy Language Defaults
// ----------------------
// - PRIVATE
@include susy-defaults((
container: auto,
math: fluid,
output: float,
container-position: center,
gutter-position: after,
global-box-sizing: content-box,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
));
// Valid Keyword Values
// --------------------
// - PRIVATE: DONT'T TOUCH
$susy-keywords: (
container: auto,
math: static fluid,
output: isolate float,
container-position: left center right,
flow: ltr rtl,
gutter-position: before after split inside inside-static,
box-sizing: border-box content-box,
span: full,
edge: first alpha last omega full,
spread: narrow wide wider,
gutter-override: no-gutters no-gutter,
role: nest,
clear: break nobreak,
debug image: show hide show-columns show-baseline,
debug output: background overlay,
);
// Parse Susy Keywords and Maps
// ----------------------------
@function parse-settings(
$short: $susy
) {
$_return: ();
@if type-of($short) == map {
$_return: $short;
} @else {
@each $item in $short {
// strings
@if type-of($item) == string {
@each $key, $value in $susy-keywords {
@if index($value, $item) {
$_key-value: append($key, $item);
$_return: _susy-deep-set($_return, $_key-value...);
}
}
// maps
} @else if type-of($item) == map {
$_return: map-merge($_return, $item);
}
}
}
@return $_return;
}
// Parse Columns & Gutters
// -----------------------
@function parse-layout(
$short
) {
$_return: ();
$_columns: ();
$_gutters: null;
@if not(unitless(nth(nth($short, 1), 1))) {
$_gutters: nth($short, 1);
} @else {
$_columns: (columns: nth($short, 1));
$_gutters: if(length($short) > 1, nth($short, 2), $_gutters);
}
@if type-of($_gutters) == list and length($_gutters) > 0 {
$_gutters: (
gutters: nth($_gutters, 2) / nth($_gutters, 1),
column-width: nth($_gutters, 1),
);
} @else {
$_gutters: if($_gutters, (gutters: $_gutters), ());
}
$_return: map-merge($_return, $_columns);
$_return: map-merge($_return, $_gutters);
@return $_return;
}
// Parse Grid/Context
// ------------------
@function parse-grid(
$short: $susy
) {
$_return: parse-settings($short);
$_layout: ();
@if type-of($short) == map {
$_return: $short;
} @else {
@each $item in $short {
// number or list
@if type-of($item) == number or type-of($item) == list {
@if type-of($item) == list or unitless($item) {
$_layout: append($_layout, $item);
} @else {
$_return: map-merge($_return, (container: $item));
}
}
}
$_layout: if(length($_layout) > 0, parse-layout($_layout), $_layout);
}
@return map-merge($_return, $_layout);
}
// Parse Span
// ----------
@function parse-span(
$short,
$key: span
) {
$_return: ();
@if type-of($short) == map {
$_return: $short;
} @else {
$_at: index($short, at);
@if $_at {
$_loci: $_at + 1;
$_location: nth($short, $_loci);
$_return: map-merge($_return, (location: $_location));
$short: set-nth($short, $_at, null);
$short: set-nth($short, $_loci, null);
}
$_i: 1;
$_span: ();
@while $_i <= length($short) {
$_this: nth($short, $_i);
@if type-of($_this) == number {
$_span: append($_span, $_this);
$short: set-nth($short, $_i, null);
} @else if $_this == of {
$short: set-nth($short, $_i, null);
$_i: length($short) + 1;
}
$_i: $_i + 1;
}
@if length($_span) > 0 {
$_span: if(length($_span) == 1, nth($_span, 1), $_span);
$_return: map-merge($_return, ($key: $_span));
}
$_return: map-merge($_return, parse-grid($short));
}
@return $_return;
}
// Parse Gutters
// -------------
@function parse-gutters(
$short: $susy
) {
$_gutters: parse-span($short, gutter-override);
$_span: susy-get(gutter-override, $_gutters);
@if $_span and not(map-get($_gutters, columns)) {
$_context: ();
$_new: ();
@each $item in $_span {
@if type-of($item) == number and unitless($item) {
$_context: append($_context, $item);
} @else {
$_new: append($_new, $item);
}
}
$_context: parse-grid($_context);
$_new: if(length($_new) == 0, null, $_new);
$_new: if(length($_new) == 1, nth($_new, 1), $_new);
$_new: (gutter-override: if($_new != $_span, $_new, $_span));
$_gutters: map-merge($_gutters, $_new);
$_gutters: map-merge($_gutters, $_context);
}
@return $_gutters;
}
// Span Syntax
// ===========
// Span [mixin]
// ------------
// Set a spanning element using shorthand syntax.
// - $span : <span>
@mixin span(
$span
) {
$inspect: $span;
$span: parse-span($span);
$output: span-math($span);
$nesting: susy-get(span, $span);
$clear: susy-get(clear, $span);
$box: susy-get(box-sizing, $span);
$content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
$box: $box or if(is-inside($span) and $content-box, border-box, null);
@if $clear == break {
@include break;
} @else if $clear == nobreak {
@include nobreak;
}
@include susy-inspect(span, $inspect);
@include output((box-sizing: $box));
@include float-span-output($output...);
@if valid-columns($nesting, silent) {
@include nested($span) { @content; }
} @else {
@content;
}
}
// Span [function]
// ---------------
// Return the width of a span.
// - $span : <span>
@function span(
$span
) {
@return get-span-width($span);
}
// Span Math
// ---------
// Get all the span results.
// - $span: <map>
@function span-math(
$span
) {
$nest : if(susy-get(role, $span) == nest, true, false);
$split-nest : if(is-split($span) and $nest, true, false);
$edge : get-edge($span);
$location : get-location($span);
$float : from;
$padding-before : null;
$padding-after : null;
$margin-before : null;
$margin-after : null;
// calculate widths
$spread: index(map-values($span), spread);
$span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span);
$width: get-span-width($span);
$gutters: get-gutters($span);
// apply gutters
@if is-inside($span) {
@if not(susy-get(role, $span)) {
$padding-before: map-get($gutters, before);
$padding-after: map-get($gutters, after);
}
} @else {
@if not($split-nest) {
$margin-before: map-get($gutters, before);
$margin-after: map-get($gutters, after);
}
}
// special margin handling
@if susy-get(output, $span) == isolate and $location {
$margin-before: get-isolation($span);
$margin-after: -100%;
} @else if $edge {
$is-split: is-split($span);
$pos: susy-get(gutter-position, $span);
@if $edge == last {
$float: susy-get(last-flow, $span);
}
@if not($is-split) {
@if $edge == full or ($edge == first and $pos == before) {
$margin-before: 0;
}
@if $edge == full or ($edge == last and $pos == after) {
$margin-after: 0;
}
}
}
@return (
width : $width,
float : $float,
margin-before : $margin-before,
margin-after : $margin-after,
padding-before : $padding-before,
padding-after : $padding-after,
flow : susy-get(flow, $span),
);
}
// Get Span Width
// --------------
// Return span width.
// - $span: <map>
@function get-span-width(
$span
) {
$span : parse-span($span);
$n : susy-get(span, $span);
$location : get-location($span);
$columns : susy-get(columns, $span);
$gutters : susy-get(gutters, $span);
$spread : susy-get(spread, $span);
$context : null;
$span-sum : null;
$width : null;
@if $n == 'full' {
$pos: susy-get(gutter-position, $span);
$role: susy-get(role, $span);
$n: if($pos == split and $role != nest, susy-count($columns), 100%);
}
@if type-of($n) != number {
@warn "(#{type-of($n)}) #{$n} is not a valid span.";
} @else if unitless($n) {
$context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow));
$spread: if(is-inside($span), $spread or wide, $spread);
$span-sum: susy($n, $location, $columns, $gutters, $spread);
$_math: susy-get(math, $span);
$_column-width: susy-get(column-width, $span);
@if $_math == static {
$width: $span-sum * valid-column-math($_math, $_column-width);
} @else {
$width: percentage($span-sum / $context);
}
} @else {
$width: $n;
}
@return $width;
}
// Validation
// ==========
// Validate Column Math
// --------------------
@function valid-column-math(
$math,
$column-width
) {
@if $math == static and not($column-width) {
@warn 'Static math requires a valid column-width setting.';
} @else {
@return $column-width;
}
}
// ---------------------------------------------------------------------------
// Imports
@import "compass/layout/grid-background";
@import "compass/css3/background-origin";
@import "compass/css3/background-clip";
// ---------------------------------------------------------------------------
// Susy Grid Background
//
// A wrapper for the compass "column-grid-background" mixin
// Uses all your settings to create a grid background for a container element.
// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
@mixin susy-grid-background(){
@include column-grid-background($total-columns, column(), gutter(), 0);
@include background-origin(content-box);
@include background-clip(content-box);
}
// ---------------------------------------------------------------------------
// Imports
// We need access to some basic font settings for handling media-queries.
@import "compass/typography/vertical_rhythm";
// For now, we also need this...
$browser-default-font-size-px : 16px;
$browser-default-font-size-percent : 100%;
$browser-default-font-size-pt : 12pt;
$rem-with-px-fallback : true !default;
// ---------------------------------------------------------------------------
// Sass list Functions
// Return a list with specific items removed
//
// filter($list, $target)
// - $list : The list to filter.
// - $target : An item to be removed from the list.
@function filter($list, $target) {
$clean: compact();
@if index($list, $target) {
@each $item in $list {
$clean: if($item == $target, $clean, append($clean, $item));
}
} @else { $clean: $list; }
@return $clean;
}
// ---------------------------------------------------------------------------
// Don't use static output when it will break things
// Switch element-level output to fluid, when container-width is wrong for static
//
// fix-static-misalignment([$style, $width])
// - $style: $container-style.
// - $width: $container-width.
@function fix-static-misalignment(
$style: $container-style,
$width: $container-width
) {
@if $container-width and $container-width != container-outer-width($width: false) {
$style: fluid;
}
@return $style;
}
// ---------------------------------------------------------------------------
// Grid Functions
// Returns the full width of a grid based on your grid settings.
//
// $columns : The number of columns to get width for.
@function columns-width(
$columns : $total-columns
) {
@if round($columns) != $columns {
@warn "Susy works best with integer column-spans." +
"For partial-columns, you may need to finesse the math by hand using functions directly.";
}
@return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
}
// Return the grid width after adding or subtracting grid padding
//
// $width : the width of the grid without padding;
// $operation : ( add | subtract ) if padding should be added or subtracted;
@function handle-grid-padding(
$width,
$operation : subtract
) {
$pad: $grid-padding*2;
@if comparable($width, $grid-padding) {
$width: if($operation == subtract, $width - $pad, $width + $pad);
} @else {
@warn "$grid-padding must be set in units comparable to the container width.";
}
@return $width;
}
// Return the full outer width of a Container element.
//
// $columns : The number of columns in the Grid Layout.
@function container-outer-width(
$columns : $total-columns,
$width : $container-width
) {
$outerwidth: if($width, $width, columns-width($columns));
@if $width {
@if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); }
} @else {
@if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
}
@return $outerwidth;
}
// Return the percentage width of a single column in a given 'context'.
//
// $context : The grid context in columns, if nested.
// $style : The container style to use.
@function column(
$context : $total-columns,
$style : fix-static-misalignment()
) {
@return if($style == static, $column-width, relative-width($column-width, $context));
}
// Return the percentage width of multiple 'columns' in a given 'context'.
//
// $columns : The number of columns to get relative width for.
// $context : The grid context in columns, if nested.
// $style : The container style to use.
@function columns(
$columns,
$context : $total-columns,
$style : fix-static-misalignment()
) {
@return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
}
// Return the percentage width of a single gutter in a given 'context'.
//
// $context : The grid context in columns, if nested.
// $style : The container style to use.
@function gutter(
$context : $total-columns,
$style : fix-static-misalignment()
) {
@return if($style == static, $gutter-width, relative-width($gutter-width, $context));
}
// Return the percentage width of a given value in a given 'context'.
//
// $width : Any given width value.
// $context : The grid context in columns, if nested.
@function relative-width(
$width,
$context : $total-columns
) {
@return percentage($width / columns-width($context));
}
// Return the total space occupied by multiple columns and associated gutters.
// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
//
// $columns : The number of columns to get relative space for.
// $context : The grid context in columns, if nested.
// $style : The container style to use.
@function space(
$columns,
$context : $total-columns,
$style : fix-static-misalignment()
) {
@return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
}
// Accept a list including column-count and (optional) position.
// Return either the column count or the position alone.
//
// $columns : the list to split and interprate.
// $request : The value to return, either 'columns' or 'position'.
@function split-columns-value(
$columns,
$request : columns
) {
$pos : false;
$cols : false;
@each $var in $columns {
@if (type-of($var) == 'string') {
$pos: $var;
} @else {
@if (type-of($var) == 'number') and (unitless($var)) {
$cols: $var;
} @else {
@warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
}
}
}
@if $request == 'columns' {
@return $cols;
} @else {
@if $request == 'position' {
@return $pos;
} @else {
@warn '"#{$request}" is not a valid value for $request';
}
}
}
// Accept nth-selector variables, and format them as a valid CSS3 selector.
//
// $n : [first | only | last | <equation>]
// $selector : [child | last-child | of-type | last-of-type ]
@function format-nth(
$n : last,
$selector : child
) {
@if ($n == 'last') or ($n =='first') or ($n =='only') {
$selector: '#{$n}-#{$selector}';
} @else {
$selector: 'nth-#{$selector}(#{$n})';
}
@return $selector;
}
// ---------------------------------------------------------------------------
// Media Functions
// Return an em value adjusted to match the browser default font size.
// Note: This only works if actual sizes are set relative to browser defaults.
//
// $ems : The initial value to be converted.
// $font-size : The current font-size in.
@function base-ems(
$ems,
$font-size: $base-font-size
){
$font-size : if(unit($ems) == 'rem', $base-font-size, $font-size);
$unit : unit($font-size);
$mult : $ems / ($ems * 0 + 1);
@if $unit == 'px' {
@return $font-size / $browser-default-font-size-px * $mult * 1em;
}
@else if $unit == '%' {
@return $font-size / $browser-default-font-size-percent * $mult * 1em;
}
@else if $unit == 'em' {
@return $font-size / 1em * $mult * 1em;
}
@else if $unit == 'pt' {
@return $font-size / $browser-default-font-size-pt * $mult * 1em;
}
@else {
@warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
}
}
// This name will be deprecated...
@function absolute-ems(
$ems,
$font-size: $base-font-size
){
@return base-ems( $ems, $font-size);
}
// Return a length, after any em-values have been sent through absolute-ems().
//
// $length : The length value to be checked and adjusted if necessary.
// $font-size : The current font-size in px.
@function fix-ems(
$length,
$font-size: $base-font-size
){
@if $length {
@if (unit($length) == 'em') or (unit($length) == 'rem') {
$length: absolute-ems($length,$font-size);
}
}
@return $length;
}
// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
//
// $media-layout : a list of values [$min $layout $max $ie] including...
// : - one unitless number (columns in a layout)
// : - two optional lengths (min and max-width media-query breakpoints).
// : - one optional boolean or string to trigger fallback support for IE.
// $font-size : [optional] The base font-size of your layout, if you are using ems.
// : - defaults to $base-font-size
@function medialayout(
$media-layout,
$font-size: $base-font-size
) {
$media : false;
$min : false;
$layout : false;
$max : false;
$ie : false;
$has-layout : false;
@each $val in $media-layout {
@if (type-of($val) == "number") {
@if unitless($val) {
$layout : $val;
$has-layout : true;
} @else {
@if ($has-layout) and not($media) {
$max: $val;
} @else {
@if $media {
$media: join($media,$val);
} @else {
$media: $val;
}
}
}
} @else {
$ie: $val;
}
}
@if (length($media) > 0) {
@if (length($media) == 1) {
$min: nth($media,1);
} @else {
$min: nth($media,1);
$max: nth($media,2);
@if comparable($min, $max) {
@if ($min > $max) {
$max: nth($media,1);
$min: nth($media,2);
}
} @else {
@warn "Can't compare incompatible units." +
"Using #{$min} for min-width, and #{$max} for max-width";
}
@if (length($media) > 2) {
@warn "You can only send two lengths: a min-width and an (optional) max-width." +
"You sent #{length($media)}: #{$media}";
}
}
}
// media-queries must be set in ems relative to the browser default
// rather than the font-size set in CSS.
$min: fix-ems($min,$font-size);
$max: fix-ems($max,$font-size);
@return $min $layout $max $ie;
}
// Return the nearest layout (column-count) above a given breakpoint.
//
// $min : The min-width media-query breakpoint above which to establish a new layout.
@function get-layout(
$min
) {
$min : fix-ems($min);
$return : false;
@if comparable($min, $column-width) {
$return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
} @else {
@warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
}
@return $return;
}
// Check to see if a given $media-layout list is simply the default.
//
// $media-layout : a list of values including -
// : One unitless number (columns in a layout)
// : Two optional lengths (min and max-width media-query breakpoints).
// : One optional boolean or string to trigger fallback support for IE.
@function is-default-layout(
$media-layout
) {
$media-layout : medialayout($media-layout);
$min : nth($media-layout,1);
$layout-cols : nth($media-layout,2);
$max : nth($media-layout,3);
@if $min or $max {
@return false;
} @else {
@return if($layout-cols == $total-columns,true,false);
}
}
// ---------------------------------------------------------------------------
// Imports
@import "compass/utilities/general/clearfix";
@import "compass/css3/box-sizing";
// ---------------------------------------------------------------------------
// Border-Box Sizing
// Apply the border-box sizing model to all elements
// and adjust the grid math appropriately.
@mixin border-box-sizing {
$border-box-sizing: true !global;
* { @include box-sizing(border-box); }
}
// ---------------------------------------------------------------------------
// Container
// Set the width of a container
//
// $columns : The number of columns in the Grid Layout.
@mixin set-container-width(
$columns : $total-columns,
$style : $container-style
){
$width: container-outer-width($columns);
@if $style == 'static' {
@include rem(width, $width);
} @else {
@if $style == 'fluid' {
@if unit($width) == '%' { @include rem(width, $width); }
} @else {
@include rem(max-width, $width);
@include for-legacy-browser(ie,"6") {
@if unit($width) == 'rem' {
_width: round(convert-length($width, px));
} @else {
_width: $width;
}
}
}
}
}
// Set the outer grid-containing element(s).
//
// $columns : The number of columns in the container.
@mixin apply-container(
$columns : $total-columns
){
@include pie-clearfix;
@include set-container-width($columns);
@include rem(padding-left, $grid-padding);
@include rem(padding-right, $grid-padding);
margin: { left: auto; right: auto; }
}
// Set one or more layouts on a grid-containing element at any number of media-query breakpoints.
//
// $media-layout-1 : [default:$total-columns] A list of values including -
// : One unitless number (representing columns in a layout)
// : Two optional lengths (representing min and max-width media-query breakpoints).
// $media-layout-2 ...-10 : [optional] Same as $media-layout-1
@mixin container(
$media-layouts...
){
$media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns);
@each $ml in $media-layouts {
@if is-default-layout($ml) {
@include apply-container;
} @else {
@include at-breakpoint($ml) {
@include apply-container;
}
}
}
}
// ---------------------------------------------------------------------------
// Columns
// Create a grid element spanning any number of 'columns' in a grid 'context'.
// $columns : The number of columns to span.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $padding : [optional] Padding applied to the inside of individual grid columns.
// : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px)
// : Padding values are applied only on the horizontal axis in from-to order
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin span-columns(
$columns,
$context : $total-columns,
$padding : false,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
$pos : split-columns-value($columns,position);
$cols : split-columns-value($columns,columns);
$pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
$pad-to : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
@if $padding != false {
$pad-from : nth($padding, 1);
@if length($padding) > 1 {
$pad-to: nth($padding, 2);
} @else {
$pad-to: $pad-from;
}
$pad-from : if($style == static, $pad-from, relative-width($pad-from, $context));
$pad-to : if($style == static, $pad-to, relative-width($pad-to, $context));
padding-#{$from}: $pad-from;
padding-#{$to}: $pad-to;
}
width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from);
@if ($pos == 'omega') {
@include omega($from);
} @else {
float: $from;
margin-#{$to}: gutter($context, $style);
@include for-legacy-browser(ie, "6") {
display: inline;
}
}
}
// Apply to elements spanning the last column, to account for the page edge.
// Only needed as an override. Normally 'omega' can just be called by `columns`.
//
// $from : The start-direction for your document.
@mixin omega(
$from : $from-direction
) {
$from : unquote($from);
$to : opposite-position($from);
$hack : opposite-position($omega-float);
float: $omega-float;
margin-#{$to}: 0;
@include for-legacy-browser(ie, "6", "7") {
*margin-#{$hack}: - $gutter-width;
@include for-legacy-browser(ie, "6") {
display: inline;
}
}
}
// Shortcut to apply omega to a specific subset of elements.
//
// $n : [first | only | last | <equation>]
// $selector : [child | last-child | of-type | last-of-type ]
// $from : The start-direction for your document.
@mixin nth-omega(
$n : last,
$selector : child,
$from : $from-direction
) {
$from : unquote($from);
&:#{format-nth($n,$selector)} {
@if $n == "first" {
@include omega($from);
} @else {
@include with-browser-ranges(css-sel3) {
@include omega($from);
}
}
}
}
// ---------------------------------------------------------------------------
// Resets
// Reset a '+columns' grid element to default block behavior
//
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
@mixin reset-columns(
$from: $from-direction
) {
$from : unquote($from);
$to : opposite-position($from);
$hack : opposite-position($omega-float);
float: none;
width: auto;
margin-#{$to}: auto;
@include for-legacy-browser(ie, "6", "7") {
*margin-#{$hack}: auto;
@include for-legacy-browser(ie, "6") {
display: block;
}
}
}
// Apply to elements previously set as omega.
// This will return floats and margins back to non-omega settigns.
//
// $context : [optional] The context (columns spanned by parent).
// $from : The start-direction for your document.
// $style : The container style to use.
@mixin remove-omega(
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
$hack : opposite-position($omega-float);
float: $from;
margin-#{$to}: gutter($context, $style);
@include for-legacy-browser(ie, "6", "7") {
*margin-#{$hack}: auto;
}
}
// Shortcut to apply remove-omega to a specific subset of elements.
//
// $n : [first | only | last | <equation>]
// $selector : [child | last-child | of-type | last-of-type ]
// $context : [optional] The context (columns spanned by parent).
// $from : The start-direction for your document.
// $style : The container style to use.
@mixin remove-nth-omega(
$n : last,
$selector : child,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
&:#{format-nth($n,$selector)} {
@if $n == "first" {
@include remove-omega($context, $from, $style);
} @else {
@include with-browser-ranges(css-sel3) {
@include remove-omega($context, $from, $style);
}
}
}
}
// ---------------------------------------------------------------------------
// Change Settings
@mixin with-grid-settings(
$columns: $total-columns,
$width: $column-width,
$gutter: $gutter-width,
$padding: $grid-padding
) {
// keep the defaults around
$default-columns: $total-columns;
$default-width: $column-width;
$default-gutter: $gutter-width;
$default-padding: $grid-padding;
// use the new settings
$total-columns: $columns !global;
$column-width: $width !global;
$gutter-width: $gutter !global;
$grid-padding: $padding !global;
// apply to contents
@content;
// re-instate the defaults
$total-columns: $default-columns !global;
$column-width: $default-width !global;
$gutter-width: $default-gutter !global;
$grid-padding: $default-padding !global;
}
// ---------------------------------------------------------------------------
// Isolation
// Isolate the position of a grid element (use in addition to span-columns)
//
// $location : The grid column to isolate in, relative to the container;
// $context : [optional] The context (columns spanned by parent).
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
@mixin isolate(
$location,
$context: $total-columns,
$from: $from-direction,
$style: fix-static-misalignment()
) {
$to: opposite-position($from);
margin-#{$to}: -100%;
margin-#{$from}: space($location - 1, $context, $style);
}
// Isolate a group of elements in a grid, using nth-child selectors
//
// $columns : The column-width of each item on the grid;
// $context : [optional] The context (columns spanned by parent).
// $selector : [child | of-type | last-of-type ] (default is 'child')
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
@mixin isolate-grid(
$columns,
$context: $total-columns,
$selector: 'child',
$from: $from-direction,
$style: fix-static-misalignment()
) {
$to: opposite-position($from);
$location: 1;
$line: floor($context / $columns);
@include span-columns($columns, $context, $from: $from, $style: $style);
margin-#{$to}: -100%;
@for $item from 1 through $line {
$nth: '#{$line}n + #{$item}';
&:#{format-nth($nth,$selector)} {
margin-#{$from}: space($location - 1, $context, $style);
@if $location == 1 { clear: $from; }
@else { clear: none; }
$location: $location + $columns;
@if $location > $context { $location: 1; }
}
}
}
// ---------------------------------------------------------------------------
// Margin Mixins
// Apply 'columns' margin before an element to push it along the grid.
//
// $columns : The number of columns to span.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin pre(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
margin-#{$from}: space($columns, $context, $style);
}
// 'push' is a synonymn for 'pre'
@mixin push(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
@include pre($columns, $context, $from, $style);
}
// Apply negative 'columns' margin before an element to pull it along the grid.
//
// $columns : The number of columns to span.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin pull(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
margin-#{$from}: 0 - space($columns, $context, $style);
}
// Apply 'columns' margin after an element to contain it in a grid.
//
// $columns : The number of columns to span.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin post(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
margin-#{$to}: space($columns, $context, $style);
}
// Apply 'columns' before and/or after an element to contain it on a grid.
//
// $pre : The number of columns to add as margin before.
// $post : The number of columns to add as margin after.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin squish(
$pre : false,
$post : false,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
@if $pre {
@include pre($pre, $context, $from, $style)
}
@if $post {
@include post($post, $context, $from, $style)
}
}
// ---------------------------------------------------------------------------
// Media Mixins
// Create a new layout context for (@content) descendants.
//
// $layout-cols : a (unitless) number of columns to use for this layout.
@mixin layout(
$layout-cols
) {
// store default $total-columns setting for later, then change it.
$default-layout : $total-columns;
$total-columns : $layout-cols !global;
// apply children in this new layout context.
@content;
// return to default $total-columns setting.
$total-columns : $default-layout !global;
}
// Nest a block of code inside a new media-query and layout context.
//
// $media-layout : a list of values [$min $layout $max $ie] including...
// : - one unitless number (columns in a layout)
// : - two optional lengths (min and max-width media-query breakpoints).
// : - one optional boolean or string to trigger fallback support for IE.
// $font-size : [optional] The base font-size of your layout, if you are using ems.
// : - defaults to $base-font-size
@mixin at-breakpoint(
$media-layout,
$font-size: $base-font-size
) {
$media-layout : medialayout($media-layout,$font-size);
$min : nth($media-layout,1);
$layout : nth($media-layout,2);
$max : nth($media-layout,3);
$ie : nth($media-layout,4);
@if not($breakpoint-media-output) and not($breakpoint-ie-output) and not($breakpoint-raw-output) {
@warn "Either $breakpoint-media-output, $breakpoint-ie-output, or $breakpoint-raw-output must be true for at-breakpoint to work.";
}
// We need to have either a min-width breakpoint or a layout in order to proceed.
@if $min or $layout or $max {
// If we don't have a layout, we create one based on the min-width.
@if not($layout) {
$layout: get-layout($min);
}
// If we still don't have a layout, we have a problem.
@if $layout {
// Set our new layout context.
@include layout($layout) {
@if $breakpoint-media-output {
@include with-browser-ranges(css-mediaqueries) {
@if $min and $max {
// Both $min and $max
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else {
@if not($min) and not($max) {
// Neither $min nor $max:
// We can create a breakpoint based on the number of columns in the layout.
$min: fix-ems(container-outer-width($width: false));
}
@if $min {
// Min only:
@media (min-width: $min) {
@content;
}
} @else {
// Max only:
@media (max-width: $max) {
@content;
}
}
}
}
}
// Set an IE fallback
@if $ie and $breakpoint-ie-output {
@if (type-of($ie) == 'bool') {
$ie: 'lt-ie9';
}
.#{$ie} & {
@content;
}
}
@if $breakpoint-raw-output {
@content;
}
}
} @else {
@warn "We were unable to determine a layout for your breakpoint.";
}
} @else {
@warn "You need to provide either a valid layout (number of columns)
or a valid media-query min-width breakpoint (length).";
}
}
// ---------------------------------------------------------------------------
// Padding Mixins
// add empty colums as padding before an element.
// $columns : The number of columns to prefix.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin prefix(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
padding-#{$from}: space($columns, $context, $style);
}
// add empty colums as padding after an element.
// $columns : The number of columns to suffix.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin suffix(
$columns,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
$to : opposite-position($from);
padding-#{$to}: space($columns, $context, $style);
}
// add empty colums as padding before and after an element.
// $columns : The number of columns to pad.
// $context : [optional] The context (columns spanned by parent).
// : Context is required on any nested elements.
// : Context MUST NOT be declared on a root element.
// $from : The start direction of your layout (e.g. 'left' for ltr languages)
// $style : The container style to use.
@mixin pad(
$prefix : false,
$suffix : false,
$context : $total-columns,
$from : $from-direction,
$style : fix-static-misalignment()
) {
$from : unquote($from);
@if $prefix {
@include prefix($prefix, $context, $from, $style);
}
@if $suffix {
@include suffix($suffix, $context, $from, $style);
}
}
// Bleed into colums with margin/padding on any side of an element.
// $width : The side of the bleed.
// : Any unit-length will be used directly.
// : Any unitless number will be used as a column-count.
// : Use "2 of 6" format to represent 2 cals in a 6-col nested context.
// $sides : One or more sides to bleed [ top | right | bottom | left | all ].
// $style : The container style to use.
@mixin bleed(
$width: $grid-padding,
$sides: left right,
$style: fix-static-misalignment()
) {
@if $border-box-sizing { @include box-sizing(content-box) }
@if type-of($width) == 'list' {
$width: filter($width, of);
$width: space(nth($width,1), nth($width,2), $style);
} @else if unitless($width) {
$width: space($width, $style: $style);
}
@if $sides == 'all' {
margin: - $width;
padding: $width;
} @else {
@each $side in $sides {
margin-#{$side}: - $width;
padding-#{$side}: $width;
}
}
}
// ---------------------------------------------------------------------------
// Susy Settings
// The total number of columns in the grid
$total-columns : 12 !default;
// The width of columns and gutters.
// These must all be set with the comparable units.
$column-width : 4em !default;
$gutter-width : 1em !default;
// Padding on the left and right of a Grid Container.
$grid-padding : $gutter-width !default;
// ---------------------------------------------------------------------------
// Advanced Settings
// From Direction:
// Controls for right-to-left or bi-directional sites.
$from-direction : left !default;
// Omega Float Direction:
// The direction that +omega elements are floated by deafult.
$omega-float : opposite-position($from-direction) !default;
// Container Width:
// Override the total width of your grid, using any length (50em, 75%, etc.)
$container-width : false !default;
// Container Style:
// 'magic' - Static (fixed or elastic) when there's enough space,
// fluid when there isn't. This is the SUSY MAGIC SAUCE(TM).
// 'static' - Forces the grid container to remain static at all times.
// 'fluid' - Forces the grid to remain fluid at all times.
// (this will overrule any static $container-width settings)
$container-style : magic !default;
// Border-Box Sizing
// Adjust the grid math appropriately for box-sizing: border-box;
// Warning: This does not actually apply the new box model!
// In most cases you can ignore this setting,
// and simply apply the border-box-sizing mixin.
$border-box-sizing : false !default;
// ---------------------------------------------------------------------------
// IE Settings
// When you are using a seperate IE stylesheet,
// you can use these settings to control the output of at-breakpoint.
// By default, at-breakpoint will output media-queries as well as
// any defined ie-fallback classes.
$breakpoint-media-output : true !default;
$breakpoint-ie-output : true !default;
// Danger Zone! Only set as 'true' in IE-specific style sheets.
$breakpoint-raw-output : false !default;
// Float API
// =========
@import "shared";
@import "float/container";
@import "float/span";
@import "float/end";
@import "float/isolate";
// Shared API
// ==========
@import "support";
@import "shared/inspect";
@import "shared/output";
@import "shared/direction";
@import "shared/background";
@import "shared/container";
@import "shared/margins";
@import "shared/padding";
// Susy Browser Support
// ====================
@import "support/support";
@import "support/prefix";
@import "support/background";
@import "support/box-sizing";
@import "support/rem";
@import "support/clearfix";
// Float Container API
// ===================
// Float Container
// ---------------
// - [$width] : <length>
// - [$justify] : left | center | right
// - [$math] : fluid | static
@mixin float-container(
$width,
$justify: auto auto,
$property: max-width
) {
@include susy-clearfix;
@include container-output($width, $justify, $property);
}
// Float Ends API
// ==============
// Susy End Defaults
// -----------------
// - PRIVATE
@include susy-defaults((
last-flow: to,
));
// Float Last
// ----------
// - [$flow] : ltr | rtl
@mixin float-last(
$flow: map-get($susy-defaults, flow),
$last-flow: map-get($susy-defaults, last-flow),
$margin: 0
) {
$to: to($flow);
$output: (
float: if($last-flow == to, $to, null),
margin-#{$to}: $margin,
);
@include output($output);
}
// Float First
// -----------
// - [$flow] : ltr | rtl
@mixin float-first(
$flow: map-get($susy-defaults, flow)
) {
$output: (
margin-#{from($flow)}: 0,
);
@include output($output);
}
// Float Isolation API
// ===================
// Isolate Output
// --------------
// - $push : <length>
// - [$flow] : ltr | rtl
@mixin isolate-output(
$push,
$flow: map-get($susy-defaults, flow)
) {
$to: to($flow);
$from: from($flow);
$output: (
float: $from,
margin-#{$from}: $push,
margin-#{$to}: -100%,
);
@include output($output);
}
// Float Span API
// ==============
// Float Span Output
// -----------------
// - $width : <length>
// - [$float] : from | to
// - [$margin-before] : <length>
// - [$margin-after] : <length>
// - [$padding-before] : <length>
// - [$padding-after] : <length>
// - [$flow] : ltr | rtl
@mixin float-span-output(
$width,
$float : from,
$margin-before : null,
$margin-after : null,
$padding-before : null,
$padding-after : null,
$flow : map-get($susy-defaults, flow)
) {
$to : to($flow);
$from : from($flow);
$output: (
width: $width,
float: if($float == to, $to, null) or if($float == from, $from, null),
margin-#{$from}: $margin-before,
margin-#{$to}: $margin-after,
padding-#{$from}: $padding-before,
padding-#{$to}: $padding-after,
);
@include output($output);
}
// Grid Background API
// ===================
// - Sub-pixel rounding can lead to several pixels variation between browsers.
// Grid Background Output
// ----------------------
// - $image: background-image
// - $size: background-size
// - $clip: background-clip
// - [$flow]: ltr | rtl
@mixin background-grid-output (
$image,
$size: null,
$clip: null,
$flow: map-get($susy-defaults, flow)
) {
$output: (
background-image: $image,
background-size: $size,
background-origin: $clip,
background-clip: $clip,
background-position: from($flow) top,
);
@include output($output);
}
// Shared Container API
// ====================
// Container Output
// ----------------
// - [$width] : <length>
// - [$justify] : left | center | right
// - [$math] : fluid | static
@mixin container-output(
$width,
$justify: auto auto,
$property: max-width
) {
$output: (
#{$property}: $width or 100%,
margin-left: nth($justify, 1),
margin-right: nth($justify, 2),
);
@include output($output);
}
// Direction Helpers
// =================
// Susy Flow Defaults
// ------------------
// - PRIVATE
@include susy-defaults((
flow: ltr,
));
// Get Direction
// -------------
// Return the 'from' or 'to' direction of a ltr or rtl flow.
// - [$flow] : ltr | rtl
// - [$key] : from | to
@function get-direction(
$flow: map-get($susy-defaults, flow),
$key: from
) {
$return: if($flow == rtl, (from: right, to: left), (from: left, to: right));
@return map-get($return, $key);
}
// To
// --
// Return the 'to' direction of a flow
// - [$flow] : ltr | rtl
@function to(
$flow: map-get($susy-defaults, flow)
) {
@return get-direction($flow, to);
}
// From
// ----
// Return the 'from' direction of a flow
// - [$flow] : ltr | rtl
@function from(
$flow: map-get($susy-defaults, flow)
) {
@return get-direction($flow, from);
}
// Debugging
// =========
// Susy Inspect
// ------------
// Output arguments passed to a inspect.
// - $mixin : <susy mixin>
// - $inspec : <mixin arguments>
@mixin susy-inspect($mixin, $inspect...) {
$show: false;
@each $item in $inspect {
@if index($item, inspect) {
$show: true;
}
}
@if $show or susy-get(debug inspect) {
-susy-#{$mixin}: inspect($inspect);
}
}
// Margins API
// ===========
// Margin Output
// -------------
// - $before : <length>
// - $after : <length>
// - [$flow] : ltr | rtl
@mixin margin-output(
$before,
$after,
$flow: map-get($susy-defaults, flow)
) {
$to: to($flow);
$from: from($flow);
$output: (
margin-#{$from}: $before,
margin-#{$to}: $after,
);
@include output($output);
}
// Output
// ======
// Output
// ------
// Output CSS with proper browser support.
// - $styles : <map of css property-value pairs>
@mixin output(
$styles
) {
@each $prop, $val in $styles {
@include susy-support($prop, $val);
}
}
// Padding API
// ===========
// Padding Output
// --------------
// - $before : <length>
// - $after : <length>
// - [$flow] : ltr | rtl
@mixin padding-output(
$before,
$after,
$flow: map-get($susy-defaults, flow)
) {
$to: to($flow);
$from: from($flow);
$output: (
padding-#{$from}: $before,
padding-#{$to}: $after,
);
@include output($output);
}
// Background Properties
// =====================
// Susy Background Image
// ---------------------
// Check for an existing support mixin, or provide a simple fallback.
// - $image: <background-image>
@mixin susy-background-image(
$image
) {
@if susy-support(background-image, (mixin: background-image), $warn: false) {
@include background-image($image...);
} @else {
background-image: $image;
}
}
// Susy Background Size
// ---------------------
// Check for an existing support mixin, or provide a simple fallback.
// - $image: <background-size>
@mixin susy-background-size(
$size
) {
@if susy-support(background-options, (mixin: background-size)) {
@include background-size($size);
} @else {
background-size: $size;
}
}
// Susy Background Origin
// ----------------------
// Check for an existing support mixin, or provide a simple fallback.
// - $image: <background-origin>
@mixin susy-background-origin(
$origin
) {
@if susy-support(background-options, (mixin: background-origin)) {
@include background-origin($origin);
} @else {
background-origin: $origin;
}
}
// Susy Background Clip
// --------------------
// Check for an existing support mixin, or provide a simple fallback.
// - $image: <background-clip>
@mixin susy-background-clip(
$clip
) {
@if susy-support(background-options, (mixin: background-clip)) {
@include background-clip($clip);
} @else {
background-clip: $clip;
}
}
// Box Sizing
// ==========
// Box Sizing
// ----------
// Check for an existing support mixin, or provide a simple fallback.
// - $model: <box-sizing>
@mixin susy-box-sizing(
$model: content-box
) {
@if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
@include box-sizing($model);
} @else {
$prefix: (moz, webkit, official);
@include susy-prefix(box-sizing, $model, $prefix);
}
}
// Susy Fallback Clearfix
// ======================
// Clearfix
// --------
// Check for an existing support mixin, or provide a simple fallback.
@mixin susy-clearfix {
@if susy-support(clearfix, (mixin: clearfix)) {
@include clearfix;
} @else {
&:after {
content: " ";
display: block;
clear: both;
}
}
}
// Susy Prefix
// ===========
// Prefix
// ------
// Output simple prefixed properties.
// - $prop : <css property>
// - $val : <css value>
// - [$prefix] : <browser prefix list>
@mixin susy-prefix(
$prop,
$val,
$prefix: official
) {
@each $fix in $prefix {
$fix: if($fix == official or not($fix), $prop, '-#{$fix}-#{$prop}');
@include susy-rem($fix, $val);
}
}
// rem Support
// ===========
// rem
// ---
// Check for an existing support mixin, or output directly.
// - $prop : <css property>
// - $val : <css value>
@mixin susy-rem(
$prop,
$val
) {
$_reqs: (
variable: rhythm-unit rem-with-px-fallback,
mixin: rem,
);
@if susy-support(rem, $_reqs, $warn: false) and $rhythm-unit == rem {
@include rem($prop, $val);
} @else {
#{$prop}: $val;
}
}
// Browser Support
// ===============
// Susy Support Defaults
// ---------------------
@include susy-defaults((
use-custom: (
clearfix: false,
background-image: true,
background-options: false,
breakpoint: true,
box-sizing: true,
rem: true,
),
));
// Susy Support [mixin]
// --------------------
// Send property-value pairs to the proper support modules.
// - $prop : <css property>
// - $val : <css value>
@mixin susy-support(
$prop,
$val
) {
// Background Support
@if $prop == background-image {
@include susy-background-image($val);
} @else if $prop == background-size {
@include susy-background-size($val);
} @else if $prop == background-origin {
@include susy-background-origin($val);
} @else if $prop == background-clip {
@include susy-background-clip($val);
}
// Box-Sizing Support
@else if $prop == box-sizing {
@include susy-box-sizing($val);
}
// Rem Support
@else {
@include susy-rem($prop, $val);
}
}
// Susy Support [function]
// -----------------------
// Check for support of a feature.
// - $feature : <string>
// - e.g "rem" or "box-sizing"
// - $requirements : <map>
// - e.g (variable: rem-with-px-fallback, mixin: rem)
// - $warn : <bool>
@function susy-support(
$feature,
$requirements: (),
$warn: true
) {
$_support: susy-get(use-custom $feature);
@if $_support {
$_fail: false;
@each $_type, $_req in $requirements {
@each $_i in $_req {
$_pass: call(#{$_type}-exists, $_i);
@if not($_pass) {
$_fail: true;
@if $warn {
@warn "You requested custom support of #{$feature}, but the #{$_i} #{$_type} is not available.";
}
}
}
}
$_support: if($_fail, false, $_support);
}
@return $_support;
}
// Column math
// ===========
// Is Symmetrical
// --------------
// Returns true if a grid is symmetrical.
// - [$columns] : <number> | <list>
@function is-symmetrical(
$columns: susy-get(columns)
) {
$columns: valid-columns($columns);
@return if(type-of($columns) == number, $columns, null);
}
// Susy Count
// ----------
// Find the number of columns in a given layout
// - [$columns] : <number> | <list>
@function susy-count(
$columns: susy-get(columns)
) {
$columns: valid-columns($columns);
@return is-symmetrical($columns) or length($columns);
}
// Susy Sum
// --------
// Find the total sum of column-units in a layout
// - [$columns] : <number> | <list>
// - [$gutters] : <ratio>
// - [$spread] : false/narrow | wide | wider
@function susy-sum(
$columns : susy-get(columns),
$gutters : susy-get(gutters),
$spread : false
) {
$columns: valid-columns($columns);
$gutters: valid-gutters($gutters);
$spread: if($spread == wide, 0, if($spread == wider, 1, -1));
$gutter-sum: (susy-count($columns) + $spread) * $gutters;
$column-sum: is-symmetrical($columns);
@if not($column-sum) {
@each $column in $columns {
$column-sum: ($column-sum or 0) + $column;
}
}
@return $column-sum + $gutter-sum;
}
// Susy Slice
// ----------
// Return a subset of columns at a given location.
// - $span : <number>
// - $location : <number>
// - [$columns] : <number> | <list>
@function susy-slice(
$span,
$location,
$columns: susy-get(columns)
) {
$columns: valid-columns($columns);
$sub-columns: $span;
@if not(is-symmetrical($columns)) {
$location: $location or 1;
$sub-columns: ();
@for $i from $location to ($location + $span) {
$sub-columns: append($sub-columns, nth($columns, $i));
}
}
@return $sub-columns;
}
// Susy
// ----
// Find the sum of a column-span.
// - $span : <number>
// - $location : <number>
// - [$columns] : <number> | <list>
// - [$gutters] : <ratio>
// - [$spread] : false/narrow | wide | wider
@function susy(
$span,
$location : false,
$columns : susy-get(columns),
$gutters : susy-get(gutters),
$spread : false
) {
$columns: valid-columns($columns);
$gutters: valid-gutters($gutters);
$span: susy-slice($span, $location, $columns);
@return susy-sum($span, $gutters, $spread);
}
// Settings
// ========
// Version
// -------
$su-version: 1.1;
// Default Settings
// ----------------
// PRIVATE: The basic settings
$susy-defaults: (
columns: 4,
gutters: 1/4,
);
// User Settings
// -------------
// - Define the $susy variable with a map of your own settings.
// - Set EITHER $column-width OR $container
// - Use $column-width for static layouts
$susy: () !default;
// Susy Defaults
// -------------
// PRIVATE: Add defaults to Susy
@mixin susy-defaults(
$defaults
) {
$susy-defaults: map-merge($susy-defaults, $defaults) !global;
}
// Susy Set
// --------
// Change one setting
// - $key : setting name
// - $value : setting value
@mixin susy-set(
$key-value...
) {
$susy: _susy-deep-set($susy, $key-value...) !global;
}
// Susy Get
// --------
// Return one setting from a grid
// - $key : <keyword>
// - $layout : <settings>
@function susy-get(
$key,
$layout: map-merge($susy-defaults, $susy)
) {
$layout: parse-grid($layout);
$_options: $layout $susy $susy-defaults;
$_break: false;
$_return: null;
@each $opt in $_options {
@if type-of($opt) == map and not($_break) {
$_keyset: _susy-deep-has-key($opt, $key...);
@if $_keyset {
$_return: _susy-deep-get($opt, $key...);
$_break: true;
}
}
}
@return $_return;
}
// Map Functions
// =============
// Truncate List
// -------------
// - Return a list, truncated to a given length
@function _susy-truncate-list(
$list,
$length
) {
$_return: ();
@for $i from 1 through length($list) {
$_return: if($i <= $length, append($_return, nth($list, $i)), $_return);
}
@return $_return;
}
// Deep Get
// --------
// - Return a value deep in nested maps
@function _susy-deep-get(
$map,
$keys...
) {
$_return: $map;
@each $key in $keys {
@if type-of($_return) == map {
$_return: map-get($_return, $key);
}
}
@return $_return;
}
// Deep Set
// --------
// - Set a value deep in nested maps
@function _susy-deep-set(
$map,
$keys-value...
) {
$_value: nth($keys-value, -1);
$_keys: _susy-truncate-list($keys-value, length($keys-value) - 1);
$_length: length($_keys);
$_return: ();
@for $i from 1 through $_length {
$_n: 0 - $i;
$_level: _susy-truncate-list($_keys, $_length + $_n);
$_level: _susy-deep-get($map, $_level...);
$_merge: nth($_keys, $_n);
$_merge: ($_merge: $_value);
$_return: if($_level, map-merge($_level, $_merge), $_merge);
$_value: $_return;
}
@return $_return;
}
// Deep Merge
// ----------
// Return 2 objects of any depth, merged
@function _susy-deep-merge(
$map1,
$map2
) {
@if type-of($map1) != map or type-of($map2) != map {
$map1: $map2;
} @else {
@each $key, $value in $map2 {
$_new: ($key: _susy_deep-merge(map-get($map1, $key), $value));
$map1: map-merge($map1, $_new);
}
}
@return $map1;
}
// Deep Has-Key
// ------------
// - Return true if a deep key exists
@function _susy-deep-has-key(
$map,
$keys...
) {
$_return: null;
$_stop: false;
@each $key in $keys {
@if not($_stop) {
$_return: map-has-key($map, $key);
}
@if $_return {
$map: map-get($map, $key);
} @else {
$_stop: true;
}
}
@return $_return;
}
// Math Validation
// ===============
// Valid Columns
// -------------
// Check that a column setting is valid.
@function valid-columns(
$columns,
$silent: false
) {
$type: type-of($columns);
$return: null;
@if $type == number and unitless($columns) {
$return: $columns;
} @else if $type == list {
$fail: null;
@each $col in $columns {
@if type-of($col) == number {
$fail: $fail or if(unitless($col), null, true);
} @else {
$fail: true;
}
}
$return: if($fail, $return, $columns);
}
@if $return != $columns and not($silent) {
$return: null;
$warn: '$columns must be a unitless number or list of unitless numbers.';
@warn $warn + ' Current value [#{$type}]: #{$columns}';
}
@return $return;
}
// Valid Gutters
// -------------
// Check that a gutter setting is valid.
@function valid-gutters(
$gutters,
$silent: false
) {
$type: type-of($gutters);
$return: null;
@if $type == number and unitless($gutters) {
$return: $gutters;
} @else if not($silent) {
$warn: '$gutters must be a unitless number.';
@warn $warn + ' Current value [#{$type}]: #{$gutters}';
}
@return $return;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment