Skip to content
Snippets Groups Projects
Commit 0c2cb3e8 authored by Tyler Struyk's avatar Tyler Struyk
Browse files

source of 3.2 conflicts with out 3.0. Committing both for now

parent acc14b6b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 673 additions and 38 deletions
source/_annotations/annotations.js 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_data/data.yml 100755 → 100644
+ 1
− 1
View file @ 0c2cb3e8
......@@ -11,7 +11,7 @@ summary: '<p>This is the summary, which can contain <abbr title="Hyper Text Mark
title: 'Title'
url: '#'
file:
icon: '../../images/application-pdf.png'
icon: 'http://fpoimg.com/16x16?text=icon'
mime: 'application/pdf'
name: 'file name'
size: '115.83 KB'
......
source/_data/design-tokens.artifact.yml 0 → 100644
+ 274
− 0
View file @ 0c2cb3e8
# DO NOT EDIT THIS FILE. This is a gitignored artifact created by Gulp.
# Design tokens should be edited in _patterns/00-config/config.design-tokens.yml
gesso:
palette:
brand:
blue:
base: "#0071BC"
light: "#4773aa"
light-1: "#8ba6ca"
light-2: "#dce4ef"
dark: "#205493"
dark-1: "#112E51"
ocean-blue:
base: "#02bfe7"
light: "#9bdaf1"
light-1: "#e1f3f8"
dark: "#00a6d2"
dark-1: "#046b99"
grayscale:
white: "#fff"
gray-1: "#f7f7f7"
gray-2: "#f1f1f1"
gray-3: "#d6d7d9"
gray-4: "#aeb0b5"
gray-5: "#5b616b"
gray-6: "#323a45"
black: "#212121"
other:
yellow:
base: "#fad980"
light: "#fff1d2"
yellow-neon:
base: "#ff0"
green:
base: "#94bfa2"
light: "#e7f4e4"
red:
base: "#e31c3d"
light: "#e59393"
light-1: "#f9dede"
dark: "#cd2026"
dark-1: "#981b1e"
box-shadow:
"0": none
"1": 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
"2": 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
"3": 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
"4": 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
"5": 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)
constrains:
sm: 800px
md: 1440px
lg: 2200px
breakpoints:
xs: 480px
sm: 700px
md: 960px
lg: 1280px
colors:
text:
primary: "#212121"
secondary: "#5b616b"
on-light: "#212121"
on-dark: "#fff"
link: "#0071BC"
link-hover: "#205493"
link-active: "#205493"
link-visited: "#205493"
background:
site: "#fff"
button:
primary:
background: "#0071BC"
background-hover: "#205493"
background-active: "#112E51"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
secondary:
background: "#02bfe7"
background-hover: "#00a6d2"
background-active: "#046b99"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
disabled:
background: "#f1f1f1"
text: "#aeb0b5"
danger:
background: "#e31c3d"
background-hover: "#cd2026"
background-active: "#981b1e"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
form:
background: "#f7f7f7"
background-active: "#fff"
background-checked: "#0071BC"
background-unchecked: "#fff"
border: "#d6d7d9"
border-dark: "#5b616b"
border-light: "#f7f7f7"
thumb: "#5b616b"
track: "#aeb0b5"
mark:
background: "#ff0"
text: "#212121"
selection:
background: "#0071BC"
text: "#fff"
table:
border: "#5b616b"
background: "#fff"
background-head: "#f1f1f1"
background-foot: "#f1f1f1"
ui:
generic:
background: "#aeb0b5"
background-darker: "#212121"
background-dark: "#323a45"
background-light: "#f1f1f1"
background-lighter: "#f7f7f7"
border: "#aeb0b5"
border-dark: "#323a45"
border-light: "#f1f1f1"
text-lighter: "#fff"
text-light: "#aeb0b5"
text-dark: "#5b616b"
text-darker: "#212121"
accent: "#0071BC"
accent-dark: "#112E51"
accent-light: "#4773aa"
focus: "#4773aa"
error:
background: "#f9dede"
border: "#e59393"
success:
background: "#e7f4e4"
border: "#94bfa2"
warning:
background: "#fff1d2"
border: "#fad980"
typography:
font-family:
primary:
name: Primary
stack: '"Source Sans Pro", Arial, sans-serif'
system:
name: System
stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans",
Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
monospace:
name: Monospace
stack: Consolas, "Lucida Console", "Liberation Mono", "Courier New",
monospace, sans-serif
base-font-size: 16px
font-size:
"0": 12px
"1": 16px
"2": 20px
"3": 24px
"4": 32px
"5": 40px
"6": 48px
"7": 56px
"8": 64px
"9": 72px
font-weight:
light: 300
regular: 400
semibold: 600
bold: 700
line-height:
tight: 1.1
base: 1.45
loose: 1.7
display:
display:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 64px
font-weight: 700
line-height: 1.1
h1:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 48px
font-weight: 700
line-height: 1.1
h2:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 40px
font-weight: 700
line-height: 1.1
h3:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 32px
font-weight: 700
line-height: 1.1
h4:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 24px
font-weight: 700
line-height: 1.45
h5:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 16px
font-weight: 700
line-height: 1.45
h6:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 12px
font-weight: 600
letter-spacing: -0.04em
line-height: 1.7
text-transform: uppercase
blockquote:
color: "#0071BC"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 24px
font-weight: 400
line-height: 1.45
body:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 16px
font-weight: 400
line-height: 1.45
body-large:
color: "#212121"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 20px
font-weight: 400
line-height: 1.45
cite:
color: "#5b616b"
font-family: '"Source Sans Pro", Arial, sans-serif'
font-size: 12px
font-style: normal
font-weight: 600
letter-spacing: .02em
line-height: 1.1
transitions:
ease:
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
ease-out: cubic-bezier(0.0, 0, 0.2, 1)
ease-in: cubic-bezier(0.4, 0, 1, 1)
sharp: cubic-bezier(0.4, 0, 0.6, 1)
duration:
shortest: 150ms
short: 200ms
standard: 375ms
long: 400ms
intro: 270ms
outro: 195ms
z-index:
nav: 1000
drawer: 1200
modal: 1300
spacing:
xxs: 4px
xs: 8px
sm: 16px
md: 24px
lg: 40px
xl: 56px
xxl: 96px
gutter-width: 40px
source/_data/listitems.json 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_data/listitems.yml 100755 → 100644
+ 7
− 7
View file @ 0c2cb3e8
1:
url: 'http://www.commercekitchen.com/whedon-ipsum/'
title: 'You can''t take the sky from me'
title: 'You can’t take the sky from me'
summary: |-
<p>We're gonna explode? I don't wanna explode. Boy, when they were handing out school spirit, you didn't even stand in line, did you? We will rule over all this land, and we will call it...This Land. It's about power and it's about women and you just hate those two words in the same sentence, don't you? Just once I would like to run into a cult of bunny worshippers. Put your words in word places please.</p>'
<p>We’re gonna explode? I don’t wanna explode. Boy, when they were handing out school spirit, you didn’t even stand in line, did you? We will rule over all this land, and we will call it…This Land. It’s about power and it’s about women and you just hate those two words in the same sentence, don’t you? Just once I would like to run into a cult of bunny worshippers. Put your words in word places please.</p>'
img:
thumbnail:
src: 'https://picsum.photos/140/105?image=0'
......@@ -177,7 +177,7 @@
url: 'http://www.malevole.com/mv/misc/text/'
title: 'Thunder, thunder, thundercats, Ho!'
summary: |-
<p>Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</p>
<p>Beats all you’ve ever saw, been in trouble with the law since the day they was born. Straight’nin’ the curve, flat’nin’ the hills. Someday the mountain might get ’em, but the law never will. Makin’ their way, the only way they know how, that’s just a little bit more than the law will allow. Just good ol’ boys, wouldn’t change if they could, fightin’ the system like a true modern day Robin Hood.</p>
img:
thumbnail:
src: 'https://picsum.photos/140/105?image=23'
......@@ -212,7 +212,7 @@
url: 'http://slipsum.com/lite/'
title: 'Yeah, I like animals better than people sometimes'
summary: |-
<p>Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull.</p>
<p>Especially dogs. Dogs are the best. Every time you come home, they act like they haven’t seen you in a year. And the good thing about dogs… is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man’s best friend… or the wrong man’s worst enemy. You going to give me a dog for a pet, give me a pit bull.</p>
img:
thumbnail:
src: 'https://picsum.photos/140/105?image=26'
......@@ -282,7 +282,7 @@
url: 'http://chrisvalleskey.com/fillerama/'
title: 'Rebel mission to Ord Mantell'
summary: |-
<p>I find your lack of faith disturbing. A tremor in the Force. The last time I felt it was in the presence of my old master. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands.</p>
<p>I find your lack of faith disturbing. A tremor in the Force. The last time I felt it was in the presence of my old master. Don’t act so surprised, Your Highness. You weren’t on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands.</p>
img:
thumbnail:
src: 'https://picsum.photos/140/105?image=35'
......@@ -315,9 +315,9 @@
seconds: '37'
10:
url: 'http://chrisvalleskey.com/fillerama/'
title: 'Help, help, I''m being repressed!'
title: 'Help, help, I’m being repressed!'
summary: |-
<p>The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!</p>
<p>The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don’t frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!</p>
img:
thumbnail:
src: 'https://picsum.photos/140/105?image=39'
......
source/_layouts/.gitkeep 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_macros/.gitkeep 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_macros/gesso.macro.twig 0 → 100644
+ 18
− 0
View file @ 0c2cb3e8
{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
{% include '@components/readmore-link/readmore-link.twig' with {
'url': url,
'label': label,
'description_prefix': description_prefix,
'title': title
} %}
{% endmacro %}
{% macro tag(url, title, type = "full", size = "normal" ) %}
{% include '@components/tag/tag.twig' with {
'url': url,
'title': title,
'type': type,
'size': size
} %}
{% endmacro %}
source/_meta/_00-head.mustache 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_meta/_00-head.twig 100755 → 100644
+ 6
− 8
View file @ 0c2cb3e8
......@@ -8,15 +8,15 @@
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ page_title }} | {{ site_name }}</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
<!--[if lte IE 8]>
<script src="../../../../../../core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<script src="../../../../../core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<![endif]-->
<script src="../../../../js/lib/modernizr.min.js?v=3.3.1"></script>
<link rel="stylesheet" href="../../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">
<script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
<link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{ patternLabHead | raw }}
......@@ -24,6 +24,4 @@
</head>
<body class="{{ body_class }}">
<div class="skiplinks">
<a href="#main" class="skiplinks__link visually-hidden focusable">Skip to main content</a>
</div>
{% include '@components/skiplinks/skiplinks.twig' %}
source/_meta/_01-foot.mustache 100755 → 100644
+ 0
− 0
View file @ 0c2cb3e8
File mode changed from 100755 to 100644
source/_meta/_01-foot.twig 100755 → 100644
+ 12
− 11
View file @ 0c2cb3e8
<script type="application/json" data-drupal-selector="drupal-settings-json">{}</script>
<script src="../../../../../../core/assets/vendor/domready/ready.min.js?v=1.0.8"></script>
<script src="../../../../../../core/assets/vendor/jquery/jquery.min.js?v=2.2.4"></script>
<script src="../../../../../../core/assets/vendor/jquery-once/jquery.once.min.js?v=2.1.1"></script>
<script src="../../../../../../core/misc/drupalSettingsLoader.js?v=8.3.7"></script>
<script src="../../../../../../core/misc/drupal.js?v=8.3.7"></script>
<script src="../../../../../../core/misc/drupal.init.js?v=8.3.7"></script>
<script src="../../../../js/overrides/collapse.js?{{ cacheBuster }}"></script>
<script src="../../../../js/overrides/dropbutton.js?{{ cacheBuster }}"></script>
<script src="../../../../js/mobile-menu.js?{{ cacheBuster }}"></script>
<script src="../../../../js/scripts.js?{{ cacheBuster }}"></script>
<script src="../../../../../core/assets/vendor/domready/ready.min.js?v=1.0.8"></script>
<script src="../../../../../core/assets/vendor/jquery/jquery.min.js?v=2.2.4"></script>
<script src="../../../../../core/assets/vendor/jquery-once/jquery.once.min.js?v=2.1.1"></script>
<script src="../../../../../core/misc/drupalSettingsLoader.js?v=8.3.7"></script>
<script src="../../../../../core/misc/drupal.js?v=8.3.7"></script>
<script src="../../../../../core/misc/drupal.init.js?v=8.3.7"></script>
<script src="../../../js/overrides/collapse.js?{{ cacheBuster }}"></script>
<script src="../../../js/overrides/dropbutton.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/common.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/primary-menu.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/mobile-menu.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/scripts.min.js?{{ cacheBuster }}"></script>
<!--DO NOT REMOVE-->
{{ patternLabFoot | raw }}
......
source/_meta/_02-basic-head.twig 100755 → 100644
+ 6
− 8
View file @ 0c2cb3e8
......@@ -6,12 +6,12 @@
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ page_title }} | {{ siteName }}</title>
<title>{{ page_title }} | {{ site_name }}</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
<script src="../../../../js/lib/modernizr.min.js?v=3.3.1"></script>
<link rel="stylesheet" href="../../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
<script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
<link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{ patternLabHead | raw }}
......@@ -19,6 +19,4 @@
</head>
<body class="{{ body_class }}">
<div class="skiplinks">
<a href="#main" class="skiplinks__link visually-hidden focusable">Skip to main content</a>
</div>
{% include '@components/skiplinks/skiplinks.twig' %}
source/_meta/_03-basic-foot.twig 100755 → 100644
+ 4
− 3
View file @ 0c2cb3e8
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?v=1.10.2"></script>
<script src="../../../../js/mobile-menu.js?{{ cacheBuster }}"></script>
<script src="../../../../js/scripts.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/common.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/primary-menu.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/mobile-menu.min.js?{{ cacheBuster }}"></script>
<script src="../../../js/dist/scripts.min.js?{{ cacheBuster }}"></script>
<!--DO NOT REMOVE-->
{{ patternLabFoot | raw }}
......
source/_patterns/00-config/00-functions/_00-functions.gesso.scss 0 → 100644
+ 98
− 0
View file @ 0c2cb3e8
/// Fetch nested keys
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Keys to fetch
/// @return {*}
@function map-deep-get($map, $keys...) {
$arg-type: type-of($map);
@if ($arg-type != map) {
@error "A valid sass map is required as the first argument. Argument #{$map} is type #{$arg-type}";
}
@each $key in $keys {
@if (map-has-key($map, $key)) {
$map: map-get($map, $key);
} @else {
@warn "Key `#{$key}` not found in map";
}
}
@return $map;
}
// Retrieve Main Theme Key
@function gesso-get-map($map-key, $keys...) {
@return map-deep-get($gesso, $map-key, $keys...);
}
// Get Constrain
@function gesso-constrain($keys...) {
@return gesso-get-map(constrains, $keys...);
}
// Get Breakpoint
@function gesso-breakpoint($keys...) {
@return gesso-get-map(breakpoints, $keys...);
}
// Get Palette
@function gesso-brand($keys...) {
@return gesso-get-map(palette, brand, $keys...);
}
@function gesso-grayscale($keys...) {
@return gesso-get-map(palette, grayscale, $keys...);
}
// Get Color
@function gesso-color($keys...) {
@return gesso-get-map(colors, $keys...);
}
// Get Font Family
@function gesso-font-family($ff-type) {
@return unquote(gesso-get-map(typography, font-family, $ff-type, stack));
}
// Get Base Font Size
@function gesso-base-font-size() {
@return gesso-get-map(typography, base-font-size);
}
// Get Font Size
@function gesso-font-size($keys...) {
@return gesso-get-map(typography, font-size, $keys...);
}
// Get Font Size
@function gesso-font-weight($keys...) {
@return gesso-get-map(typography, font-weight, $keys...);
}
// Get Line Height
@function gesso-line-height($keys...) {
@return gesso-get-map(typography, line-height, $keys...);
}
// Get Z Index
@function gesso-z-index($keys...) {
@return gesso-get-map(z-index, $keys...);
}
// Get spacing
@function gesso-spacing($keys...) {
@return gesso-get-map(spacing, $keys...);
}
@function gesso-duration($keys...) {
@return gesso-get-map(transitions, duration, $keys...);
}
@function gesso-easing($keys...) {
@return unquote(gesso-get-map(transitions, ease, $keys...));
}
@function gesso-box-shadow($keys...) {
@return unquote(gesso-get-map(box-shadow, $keys...));
}
source/_patterns/00-config/00-functions/_functions.iff.scss 0 → 100644
+ 6
− 0
View file @ 0c2cb3e8
// Wrapper for Sass' built-in `if` function that does not require you to pass
// a value for $if-false.
//GOVUK framework https://github.com/alphagov/govuk-frontend
@function iff($condition, $if-true) {
@return if($condition, $if-true, null);
}
source/_patterns/00-config/00-functions/_functions.numbers.scss 0 → 100644
+ 94
− 0
View file @ 0c2cb3e8
/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// _decimal.scss | MIT License | gist.github.com/terkel/4373420
// Round a number to specified digits.
//
// @param {Number} $number A number to round
// @param {Number} [$digits:0] Digits to output
// @param {String} [$mode:round] (round|ceil|floor) How to round a number
// @return {Number} A rounded number
// @example
// decimal-round(0.333) => 0
// decimal-round(0.333, 1) => 0.3
// decimal-round(0.333, 2) => 0.33
// decimal-round(0.666) => 1
// decimal-round(0.666, 1) => 0.7
// decimal-round(0.666, 2) => 0.67
//
@function decimal-round($number, $digits: 0, $mode: round) {
$n: 1;
// $number must be a number
@if type-of($number) != number {
@warn '#{ $number } is not a number.';
@return $number;
}
// $digits must be a unitless number
@if type-of($digits) != number {
@warn '#{ $digits } is not a number.';
@return $number;
} @else if not unitless($digits) {
@warn '#{ $digits } has a unit.';
@return $number;
}
@for $i from 1 through $digits {
$n: $n * 10;
}
@if $mode == round {
@return round($number * $n) / $n;
} @else if $mode == ceil {
@return ceil($number * $n) / $n;
} @else if $mode == floor {
@return floor($number * $n) / $n;
} @else {
@warn '#{ $mode } is undefined keyword.';
@return $number;
}
}
// Ceil a number to specified digits.
//
// @param {Number} $number A number to round
// @param {Number} [$digits:0] Digits to output
// @return {Number} A ceiled number
// @example
// decimal-ceil(0.333) => 1
// decimal-ceil(0.333, 1) => 0.4
// decimal-ceil(0.333, 2) => 0.34
// decimal-ceil(0.666) => 1
// decimal-ceil(0.666, 1) => 0.7
// decimal-ceil(0.666, 2) => 0.67
//
@function decimal-ceil($number, $digits: 0) {
@return decimal-round($number, $digits, ceil);
}
// Floor a number to specified digits.
//
// @param {Number} $number A number to round
// @param {Number} [$digits:0] Digits to output
// @return {Number} A floored number
// @example
// decimal-floor(0.333) => 0
// decimal-floor(0.333, 1) => 0.3
// decimal-floor(0.333, 2) => 0.33
// decimal-floor(0.666) => 0
// decimal-floor(0.666, 1) => 0.6
// decimal-floor(0.666, 2) => 0.66
//
@function decimal-floor($number, $digits: 0) {
@return decimal-round($number, $digits, floor);
}
@function is-number($value) {
@return type-of($value) == 'number';
}
source/_patterns/00-config/00-functions/_functions.unit-convert.scss 0 → 100644
+ 72
− 0
View file @ 0c2cb3e8
/// Convert unitless number to unit value
// @param {Number} $value - unitless number
// @return {String} - unit type
@function convert($value, $unit: px) {
@if unitless($value) {
@if $unit == px {
@return $value * 1px;
}
@if $unit == em {
@return $value * 1em;
}
} @else {
@return $value;
}
}
/// Convert values to px.
// @param {Number} $value - Value to convert. Can be px, em, or rem.
// If unitless, pixels are assumed.
// @param {Number} $base - Base font size in pixels.
// @return {Number} - Value in pixels.
@function px($value, $base: gesso-get-map(typography, base-font-size)) {
@if unitless($value) {
@return convert($value, px);
}
@if (type-of($base) != 'number' or unit($base) != 'px') {
@error "Base font size must be in pixels.";
}
@return strip-unit($value) * $base;
}
/// Convert values to em.
// @param {Number} $value - Value to convert. Can be px, em, or rem.
// If unitless, pixels are assumed.
// @param {Number} $base - Base font size in pixels.
// @return {Number} - Value in ems.
@function em($value, $base: gesso-get-map(typography, base-font-size)) {
@if (type-of($base) != 'number' or unit($base) != 'px') {
@error "Base font size must be in pixels.";
}
@if (type-of($value) == 'number' and unit($value) != 'em') {
@if (unit($value) != 'px') {
$value: px($value, $base);
}
@return ($value / $base) * 1em;
}
@return $value;
}
/// Convert values to rem.
// @param {Number} $value - Value to convert. Can be px, em, or rem.
// If unitless, pixels are assumed. If ems, size will be converted using
// the same base (so 0.5em is equal to 0.5rem). If you want to convert using
// a different font size, do rem(px($emValue, $emBase), $remBase).
// @param {Number} $base - Base font size in pixels.
// @return {Number} - Value in rems.
@function rem($value, $base: gesso-get-map(typography, base-font-size)) {
@if (type-of($base) != 'number' or unit($base) != 'px') {
@error "Base font size must be in pixels.";
}
@if (type-of($value) == 'number' and unit($value) != 'rem') {
@if (unit($value) != 'px') {
$value: px($value, $base);
}
@return ($value / $base) * 1rem;
}
@return $value;
}
source/_patterns/00-config/01-mixins/_mixins.accessibility.scss 0 → 100644
+ 75
− 0
View file @ 0c2cb3e8
// @file
// Accessibility mixins
// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
// @param {Boolean} $important
@mixin visually-hidden($important: false) {
clip: rect(1px, 1px, 1px, 1px) iff($important, !important);
height: 1px iff($important, !important);
overflow: hidden iff($important, !important);
position: absolute iff($important, !important);
width: 1px iff($important, !important);
word-wrap: normal iff($important, !important);
}
// Makes an element visually hidden with important.
@mixin visually-hidden-important {
@include visually-hidden(true);
}
// Turns off the visually-hidden effect.
//@param {boolean} $important
@mixin visually-hidden-off($important: false) {
clip: auto iff($important, !important);
height: auto iff($important, !important);
overflow: visible iff($important, !important);
position: static iff($important, !important);
width: auto iff($important, !important);
}
// Turns off the visually-hidden effect with important
@mixin visually-hidden-off-important {
@include visually-hidden-off(true);
}
// Makes an element visible when focused if it also has the visually-hidden styles.
@mixin focusable {
&:focus,
&:active {
@include visually-hidden-off;
}
}
// Makes an element visible when focused if it also has the visually-hidden styles
// with important.
@mixin focusable-important {
&:focus,
&:active {
@include visually-hidden-off-important;
}
}
// Makes an element completely hidden, visually and to screen readers.
@mixin hidden($important: false) {
display: none iff($important, !important);
}
// Makes an element completely hidden, visually and to screen readers with
// important;
@mixin hidden-important {
@include hidden(true);
}
// Makes an element completely hidden, visually and to screen readers, but
// maintains its layout.
@mixin invisible($important: false) {
visibility: hidden iff($important, !important);
}
// Makes an element completely hidden, visually and to screen readers, but
// maintains its layout using important
@mixin invisible-important {
@include invisible(true);
}
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