Stops using bourbon, too annoying to get started with. Changes to sasslines, adds more theme styles
This commit is contained in:
David Darnes
parent
afce0d6554
commit
119f7fcafa
@ -1,18 +0,0 @@
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="{{ site.logo | replace: "300", "57" }}">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="{{ site.logo | replace: "300", "60" }}">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{ site.logo | replace: "300", "72" }}">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.logo | replace: "300", "76" }}">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ site.logo | replace: "300", "114" }}">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.logo | replace: "300", "120" }}">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{{ site.logo | replace: "300", "144" }}">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.logo | replace: "300", "152" }}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.logo | replace: "300", "180" }}">
|
||||
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "32" }}" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "194" }}" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "96" }}" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "192" }}" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="{{ site.logo | replace: "300", "16" }}" sizes="16x16">
|
||||
<link rel="shortcut icon" href="{{ site.logo }}">
|
||||
<meta name="msapplication-TileColor" content="{{ site.color }}">
|
||||
<meta name="msapplication-TileImage" content="{{ site.logo | replace: "300", "144" }}">
|
||||
<meta name="theme-color" content="{{ site.color }}">
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<small class="small">© {{ site.time | date: '%Y' }} — {{ site.title }}</small>
|
||||
<small class="small">© {{ site.time | date: '%Y' }} – {{ site.title }}</small>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,16 +1,32 @@
|
||||
<header class="header">
|
||||
|
||||
<a href="{{ page.url }}" title="{{ page.title }}">
|
||||
|
||||
<img class="avatar" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }} 72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
|
||||
|
||||
</a>
|
||||
|
||||
{% include nav.html %}
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% if site.logo %}
|
||||
<a class="logo" href="{{ site.url }}" title="{{ site.title }}">
|
||||
<img class="image" src="{{ site.logo | replace: "300", "72" }}" alt="{{ site.title }}" srcset="{{ site.logo | replace: "300", "72" }} 72w, {{ site.logo | replace: "300", "144" }} 144w" width="72" height="72">
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<button class="button">Menu</button>
|
||||
|
||||
<nav class="nav nav--main">
|
||||
{% if data.nav %}
|
||||
|
||||
{% for item in data.nav %}
|
||||
<a class="item" href="{{ item.url }}" title="{{ item.name }}">{{ item.name }}</a>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% for page in site.pages %}
|
||||
{% if page.title %}
|
||||
<a class="item" href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<nav class="nav">
|
||||
<button class="button button--nav">Menu</button>
|
||||
{% if data.nav %}
|
||||
{% for item in data.nav %}
|
||||
<a href="{{ item.url }}" title="{{ item.name }}">{{ item.name }}</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for page in site.pages %}
|
||||
{% if page.title %}
|
||||
<a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</nav>
|
||||
@ -1,17 +1,21 @@
|
||||
<aside class="container">
|
||||
<aside class="aside">
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<a href="{{ paginator.previous_page_path }}" class="pagination pagination--previous">← Previous</a>
|
||||
{% else %}
|
||||
<span class="pagination pagination--previous">← Previous</span>
|
||||
{% endif %}
|
||||
<nav class="paginator container">
|
||||
|
||||
<span class="pagination pagination--divider">•</span>
|
||||
{% if paginator.previous_page %}
|
||||
<a href="{{ paginator.previous_page_path }}" class="pagination pagination--previous">← Previous</a>
|
||||
{% else %}
|
||||
<span class="pagination pagination--previous">← Previous</span>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a href="{{ paginator.next_page_path }}" class="pagination pagination--next">Next →</a>
|
||||
{% else %}
|
||||
<span class="pagination pagination--next">Next →</span>
|
||||
{% endif %}
|
||||
<span class="pagination pagination--divider">•</span>
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a href="{{ paginator.next_page_path }}" class="pagination pagination--next">Next →</a>
|
||||
{% else %}
|
||||
<span class="pagination pagination--next">Next →</span>
|
||||
{% endif %}
|
||||
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<ul class="posts">
|
||||
{% for item in paginator.posts %}
|
||||
|
||||
<li class="post">
|
||||
<li class="post container">
|
||||
|
||||
<article class="container">
|
||||
<article class="article typeset">
|
||||
|
||||
<h2>
|
||||
<a href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
// Data attribute switch
|
||||
var toggleState = function (elem, one, two) {
|
||||
var elem = document.querySelector(elem);
|
||||
elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
|
||||
};
|
||||
|
||||
// Mobile navigation toggle selector
|
||||
var buttonMenu = document.querySelector('.button--nav');
|
||||
if (typeof(buttonMenu) != 'undefined' && buttonMenu != null) {
|
||||
buttonMenu.onclick = function (e) {
|
||||
toggleState('.nav', 'open', 'closed');
|
||||
e.preventDefault();
|
||||
};
|
||||
};
|
||||
@ -15,8 +15,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Neuton" rel="stylesheet">
|
||||
<script src="/js/scripts.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<main class="container">
|
||||
<main class="main container">
|
||||
|
||||
{% include header.html %}
|
||||
<article class="article typeset">
|
||||
|
||||
<article class="content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
{{ content }}
|
||||
|
||||
@ -16,6 +16,4 @@ layout: default
|
||||
|
||||
{% include pagination.html %}
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</main>
|
||||
|
||||
@ -2,16 +2,14 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<main class="container">
|
||||
<main class="main container">
|
||||
|
||||
{% include header.html %}
|
||||
<article class="article typeset">
|
||||
|
||||
<article class="content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
{{ content }}
|
||||
|
||||
</article>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</main>
|
||||
|
||||
@ -2,21 +2,19 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<main class="container">
|
||||
<main class="main container">
|
||||
|
||||
{% include header.html %}
|
||||
<article class="article typeset">
|
||||
|
||||
<article class="content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
<small class="small">
|
||||
{% assign words = content | number_of_words %}
|
||||
<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time> – <span class="time time--reading">{{ words | divided_by:180 }} minute read</span>
|
||||
<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time> – <span class="time time--reading">{{ words | divided_by:180 }} minute read</span>
|
||||
</small>
|
||||
|
||||
{{ content }}
|
||||
|
||||
</article>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</main>
|
||||
|
||||
7
_sass/_sassline-base.scss
Executable file
7
_sass/_sassline-base.scss
Executable file
@ -0,0 +1,7 @@
|
||||
// Import Sassline base SCSS files in order so variables are read correctly.
|
||||
@import "sassline-base/reset";
|
||||
@import "sassline-base/variables";
|
||||
@import "sassline-base/modular-scale";
|
||||
@import "sassline-base/mixins";
|
||||
@import "sassline-base/typography";
|
||||
@import "sassline-base/layouts";
|
||||
@ -1,14 +0,0 @@
|
||||
// Bitters 1.3.1
|
||||
// http://bitters.bourbon.io
|
||||
// Copyright 2013-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "variables";
|
||||
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "layout";
|
||||
@import "lists";
|
||||
@import "media";
|
||||
@import "tables";
|
||||
@import "typography";
|
||||
@ -1,35 +0,0 @@
|
||||
#{$all-buttons} {
|
||||
appearance: none;
|
||||
background-color: $action-color;
|
||||
border: 0;
|
||||
border-radius: $base-border-radius;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: $small-spacing $base-spacing;
|
||||
text-decoration: none;
|
||||
transition: background-color $base-duration $base-timing;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: shade($action-color, 20%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: $action-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
fieldset {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
margin-bottom: $small-spacing / 2;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: $small-spacing / 2;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
#{$all-text-inputs},
|
||||
select[multiple] {
|
||||
background-color: $base-background-color;
|
||||
border: $base-border;
|
||||
border-radius: $base-border-radius;
|
||||
box-shadow: $form-box-shadow;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $small-spacing;
|
||||
padding: $base-spacing / 3;
|
||||
transition: border-color $base-duration $base-timing;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($base-border-color, 20%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $action-color;
|
||||
box-shadow: $form-box-shadow-focus;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: shade($base-background-color, 5%);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border: $base-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: inline;
|
||||
margin-right: $small-spacing / 2;
|
||||
}
|
||||
|
||||
[type="file"] {
|
||||
margin-bottom: $small-spacing;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: $small-spacing;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
ul,
|
||||
ol {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: $small-spacing 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid shade($base-border-color, 25%);
|
||||
font-weight: 600;
|
||||
padding: $small-spacing 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: $base-border;
|
||||
padding: $small-spacing 0;
|
||||
}
|
||||
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
body {
|
||||
color: $base-font-color;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $heading-font-family;
|
||||
font-size: modular-scale(1);
|
||||
line-height: $heading-line-height;
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $small-spacing;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $action-color;
|
||||
text-decoration: none;
|
||||
transition: color $base-duration $base-timing;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: shade($action-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: $base-border;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
margin: $base-spacing 0;
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
// Breakpoints
|
||||
$medium-screen: 600px;
|
||||
$large-screen: 900px;
|
||||
|
||||
// Typography
|
||||
$base-font-family: $font-stack-system;
|
||||
$heading-font-family: $base-font-family;
|
||||
|
||||
// Font Sizes
|
||||
$base-font-size: 1em;
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.2;
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 3px;
|
||||
$base-spacing: $base-line-height * 1em;
|
||||
$small-spacing: $base-spacing / 2;
|
||||
$base-z-index: 0;
|
||||
|
||||
// Colors
|
||||
$blue: #1565c0;
|
||||
$dark-gray: #333;
|
||||
$medium-gray: #999;
|
||||
$light-gray: #ddd;
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $dark-gray;
|
||||
$action-color: $blue;
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray;
|
||||
$base-border: 1px solid $base-border-color;
|
||||
|
||||
// Background Colors
|
||||
$base-background-color: #fff;
|
||||
$secondary-background-color: tint($base-border-color, 75%);
|
||||
|
||||
// Forms
|
||||
$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
|
||||
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms;
|
||||
$base-timing: ease;
|
||||
52
_sass/bourbon/_bourbon.scss
vendored
52
_sass/bourbon/_bourbon.scss
vendored
@ -1,52 +0,0 @@
|
||||
// Bourbon 5.0.0-beta.6
|
||||
// http://bourbon.io
|
||||
// Copyright 2011 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "bourbon/helpers/buttons-list";
|
||||
@import "bourbon/helpers/scales";
|
||||
@import "bourbon/helpers/text-inputs-list";
|
||||
|
||||
@import "bourbon/settings/settings";
|
||||
|
||||
@import "bourbon/validators/contains";
|
||||
@import "bourbon/validators/contains-falsy";
|
||||
@import "bourbon/validators/is-color";
|
||||
@import "bourbon/validators/is-length";
|
||||
@import "bourbon/validators/is-light";
|
||||
@import "bourbon/validators/is-number";
|
||||
@import "bourbon/validators/is-size";
|
||||
|
||||
@import "bourbon/utilities/assign-inputs";
|
||||
@import "bourbon/utilities/collapse-directionals";
|
||||
@import "bourbon/utilities/directional-values";
|
||||
@import "bourbon/utilities/font-source-declaration";
|
||||
@import "bourbon/utilities/retrieve-bourbon-setting";
|
||||
@import "bourbon/utilities/unpack";
|
||||
|
||||
@import "bourbon/library/border-color";
|
||||
@import "bourbon/library/border-radius";
|
||||
@import "bourbon/library/border-style";
|
||||
@import "bourbon/library/border-width";
|
||||
@import "bourbon/library/buttons";
|
||||
@import "bourbon/library/clearfix";
|
||||
@import "bourbon/library/contrast-switch";
|
||||
@import "bourbon/library/ellipsis";
|
||||
@import "bourbon/library/font-face";
|
||||
@import "bourbon/library/font-stacks";
|
||||
@import "bourbon/library/hide-text";
|
||||
@import "bourbon/library/hide-visually";
|
||||
@import "bourbon/library/margin";
|
||||
@import "bourbon/library/modular-scale";
|
||||
@import "bourbon/library/padding";
|
||||
@import "bourbon/library/position";
|
||||
@import "bourbon/library/prefixer";
|
||||
@import "bourbon/library/shade";
|
||||
@import "bourbon/library/size";
|
||||
@import "bourbon/library/strip-unit";
|
||||
@import "bourbon/library/text-inputs";
|
||||
@import "bourbon/library/timing-functions";
|
||||
@import "bourbon/library/tint";
|
||||
@import "bourbon/library/triangle";
|
||||
@import "bourbon/library/value-prefixer";
|
||||
@import "bourbon/library/word-wrap";
|
||||
14
_sass/bourbon/bourbon/helpers/_buttons-list.scss
vendored
14
_sass/bourbon/bourbon/helpers/_buttons-list.scss
vendored
@ -1,14 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A list of all HTML button elements.
|
||||
///
|
||||
/// @type list
|
||||
///
|
||||
/// @access private
|
||||
|
||||
$_buttons-list: (
|
||||
"button",
|
||||
"[type='button']",
|
||||
"[type='reset']",
|
||||
"[type='submit']",
|
||||
);
|
||||
27
_sass/bourbon/bourbon/helpers/_scales.scss
vendored
27
_sass/bourbon/bourbon/helpers/_scales.scss
vendored
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
////
|
||||
/// Pre-defined scales for use with the `modular-scale` function.
|
||||
///
|
||||
/// @type number (unitless)
|
||||
///
|
||||
/// @see {function} modular-scale
|
||||
////
|
||||
|
||||
$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;
|
||||
$golden: 1.618;
|
||||
$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;
|
||||
@ -1,26 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// A list of all _text-based_ HTML inputs.
|
||||
///
|
||||
/// @type list
|
||||
///
|
||||
/// @access private
|
||||
|
||||
$_text-inputs-list: (
|
||||
"[type='color']",
|
||||
"[type='date']",
|
||||
"[type='datetime']",
|
||||
"[type='datetime-local']",
|
||||
"[type='email']",
|
||||
"[type='month']",
|
||||
"[type='number']",
|
||||
"[type='password']",
|
||||
"[type='search']",
|
||||
"[type='tel']",
|
||||
"[type='text']",
|
||||
"[type='time']",
|
||||
"[type='url']",
|
||||
"[type='week']",
|
||||
"input:not([type])",
|
||||
"textarea",
|
||||
);
|
||||
25
_sass/bourbon/bourbon/library/_border-color.scss
vendored
25
_sass/bourbon/bourbon/library/_border-color.scss
vendored
@ -1,25 +0,0 @@
|
||||
@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.
|
||||
///
|
||||
/// @argument {arglist} $values
|
||||
/// List of colors, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-left-color: #e8ae1a;
|
||||
/// border-right-color: #76cd9c;
|
||||
/// border-top-color: #a60b55;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} _directional-property
|
||||
|
||||
@mixin border-color($values...) {
|
||||
@include _directional-property(border, color, $values...);
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a shorthand syntax to add `border-radius` to both the top-left and
|
||||
/// top-right of an element.
|
||||
///
|
||||
/// @argument {number (with unit)} $radii
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-top-radius(4px);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-top-left-radius: 4px;
|
||||
/// border-top-right-radius: 4px;
|
||||
/// }
|
||||
|
||||
@mixin border-top-radius($radii) {
|
||||
border-top-left-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
/// Provides a shorthand syntax to add `border-radius` to both the top-right and
|
||||
/// bottom-right of an element.
|
||||
///
|
||||
/// @argument {number (with unit)} $radii
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-right-radius(3px);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-bottom-right-radius: 3px;
|
||||
/// border-top-right-radius: 3px;
|
||||
/// }
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
border-bottom-right-radius: $radii;
|
||||
border-top-right-radius: $radii;
|
||||
}
|
||||
|
||||
/// Provides a shorthand syntax to add `border-radius` to both the bottom-left
|
||||
/// and bottom-right of an element.
|
||||
///
|
||||
/// @argument {number (with unit)} $radii
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-bottom-radius(2px);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-bottom-left-radius: 2px;
|
||||
/// border-bottom-right-radius: 2px;
|
||||
/// }
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-bottom-right-radius: $radii;
|
||||
}
|
||||
|
||||
/// Provides a shorthand syntax to add `border-radius` to both the top-left
|
||||
/// and bottom-left of an element.
|
||||
///
|
||||
/// @argument {number (with unit)} $radii
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-left-radius(1px);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-bottom-left-radius: 1px;
|
||||
/// border-top-left-radius: 1px;
|
||||
/// }
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
border-bottom-left-radius: $radii;
|
||||
border-top-left-radius: $radii;
|
||||
}
|
||||
24
_sass/bourbon/bourbon/library/_border-style.scss
vendored
24
_sass/bourbon/bourbon/library/_border-style.scss
vendored
@ -1,24 +0,0 @@
|
||||
@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.
|
||||
///
|
||||
/// @argument {arglist} $values
|
||||
/// List of border styles, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-style(dashed null solid);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-bottom-style: solid;
|
||||
/// border-top-style: dashed;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} _directional-property
|
||||
|
||||
@mixin border-style($values...) {
|
||||
@include _directional-property(border, style, $values...);
|
||||
}
|
||||
24
_sass/bourbon/bourbon/library/_border-width.scss
vendored
24
_sass/bourbon/bourbon/library/_border-width.scss
vendored
@ -1,24 +0,0 @@
|
||||
@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.
|
||||
///
|
||||
/// @argument {arglist} $values
|
||||
/// List of border widths, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include border-width(1em null 20px);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border-bottom-width: 20px;
|
||||
/// border-top-width: 1em;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} _directional-property
|
||||
|
||||
@mixin border-width($values...) {
|
||||
@include _directional-property(border, width, $values...);
|
||||
}
|
||||
84
_sass/bourbon/bourbon/library/_buttons.scss
vendored
84
_sass/bourbon/bourbon/library/_buttons.scss
vendored
@ -1,84 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
////
|
||||
/// @type list
|
||||
///
|
||||
/// @require {function} _assign-inputs
|
||||
///
|
||||
/// @require {variable} $_buttons-list
|
||||
////
|
||||
|
||||
/// A list of all HTML button elements. Please note that you must interpolate
|
||||
/// the variable (`#{}`) to use it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-buttons} {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// button,
|
||||
/// [type='button'],
|
||||
/// [type='reset'],
|
||||
/// [type='submit'] {
|
||||
/// background-color: #f00;
|
||||
/// }
|
||||
|
||||
$all-buttons: _assign-inputs($_buttons-list);
|
||||
|
||||
/// A list of all HTML button elements with the `:active` pseudo-class applied.
|
||||
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
||||
/// selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-buttons-active} {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// button:active,
|
||||
/// [type='button']:active,
|
||||
/// [type='reset']:active,
|
||||
/// [type='submit']:active {
|
||||
/// background-color: #00f;
|
||||
/// }
|
||||
|
||||
$all-buttons-active: _assign-inputs($_buttons-list, active);
|
||||
|
||||
/// A list of all HTML button elements with the `:focus` pseudo-class applied.
|
||||
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
||||
/// selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-buttons-focus} {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// button:focus,
|
||||
/// [type='button']:focus,
|
||||
/// [type='reset']:focus,
|
||||
/// [type='submit']:focus {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
|
||||
$all-buttons-focus: _assign-inputs($_buttons-list, focus);
|
||||
|
||||
/// A list of all HTML button elements with the `:hover` pseudo-class applied.
|
||||
/// Please note that you must interpolate the variable (`#{}`) to use it as a
|
||||
/// selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-buttons-hover} {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// button:hover,
|
||||
/// [type='button']:hover,
|
||||
/// [type='reset']:hover,
|
||||
/// [type='submit']:hover {
|
||||
/// background-color: #0f0;
|
||||
/// }
|
||||
|
||||
$all-buttons-hover: _assign-inputs($_buttons-list, hover);
|
||||
25
_sass/bourbon/bourbon/library/_clearfix.scss
vendored
25
_sass/bourbon/bourbon/library/_clearfix.scss
vendored
@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to include a clearfix for containing floats.
|
||||
///
|
||||
/// @link http://goo.gl/yP5hiZ
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include clearfix;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element::after {
|
||||
/// clear: both;
|
||||
/// content: "";
|
||||
/// display: block;
|
||||
/// }
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Switches between two colors based on the lightness of a another color. Great
|
||||
/// for building button styles.
|
||||
///
|
||||
/// @argument {color} $base-color
|
||||
/// The color to evaluate lightness against.
|
||||
///
|
||||
/// @argument {color} $dark-color [#000]
|
||||
/// The color to be output when `$base-color` is light.
|
||||
///
|
||||
/// @argument {color} $light-color [#fff]
|
||||
/// The color to be output when `$base-color` is dark.
|
||||
///
|
||||
/// @return {color}
|
||||
///
|
||||
/// @example scss
|
||||
/// .first-element {
|
||||
/// color: contrast-switch(#bae6e6);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// $button-color: #2d72d9;
|
||||
/// background-color: $button-color;
|
||||
/// color: contrast-switch($button-color, #222, #eee);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .first-element {
|
||||
/// color: #000;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// background-color: #2d72d9;
|
||||
/// color: #eee;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} _is-light
|
||||
///
|
||||
/// @since 5.0.0
|
||||
|
||||
@function contrast-switch(
|
||||
$base-color,
|
||||
$dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
|
||||
$light-color: _retrieve-bourbon-setting("contrast-switch-light-color")
|
||||
) {
|
||||
|
||||
@if not _is-color($base-color) {
|
||||
@error "`#{$base-color}` is not a valid color for the `$base-color` " +
|
||||
"argument in the `contrast-switch` function.";
|
||||
} @else if not _is-color($dark-color) {
|
||||
@error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
|
||||
"argument in the `contrast-switch` function.";
|
||||
} @else if not _is-color($light-color) {
|
||||
@error "`#{$light-color}` is not a valid color for the `$light-color` " +
|
||||
"argument in the `contrast-switch` function.";
|
||||
} @else {
|
||||
@return if(_is-light($base-color), $dark-color, $light-color);
|
||||
}
|
||||
}
|
||||
37
_sass/bourbon/bourbon/library/_ellipsis.scss
vendored
37
_sass/bourbon/bourbon/library/_ellipsis.scss
vendored
@ -1,37 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Truncates text and adds an ellipsis to represent overflow.
|
||||
///
|
||||
/// @argument {number} $width [100%]
|
||||
/// The `max-width` for the string to respect before being truncated.
|
||||
///
|
||||
/// @argument {string} $display [inline-block]
|
||||
/// Sets the display-value of the element.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include ellipsis;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .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
|
||||
) {
|
||||
|
||||
display: $display;
|
||||
max-width: $width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
65
_sass/bourbon/bourbon/library/_font-face.scss
vendored
65
_sass/bourbon/bourbon/library/_font-face.scss
vendored
@ -1,65 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates an `@font-face` declaration. You can choose the specific file
|
||||
/// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
|
||||
/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
|
||||
/// which you can enable per use, or globally in the `$bourbon()` settings.
|
||||
///
|
||||
/// @argument {string} $font-family
|
||||
///
|
||||
/// @argument {string} $file-path
|
||||
///
|
||||
/// @argument {string} $asset-pipeline [false]
|
||||
/// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
|
||||
/// in `app/assets/fonts/`).
|
||||
///
|
||||
/// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
|
||||
/// Pass a list of file formats to support,
|
||||
/// for example ("eot", "ttf", "svg", "woff2", "woff").
|
||||
///
|
||||
/// @content
|
||||
/// Any additional CSS properties that are included in the `@include`
|
||||
/// directive will be output within the `@font-face` declaration, e.g. you can
|
||||
/// pass in `font-weight`, `font-style` and/or `unicode-range`.
|
||||
///
|
||||
/// @example scss
|
||||
/// @include font-face(
|
||||
/// "source-sans-pro",
|
||||
/// "fonts/source-sans-pro-regular",
|
||||
/// ("woff2", "woff")
|
||||
/// ) {
|
||||
/// font-style: normal;
|
||||
/// font-weight: 400;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// @font-face {
|
||||
/// font-family: "source-sans-pro";
|
||||
/// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
|
||||
/// url("fonts/source-sans-pro-regular.woff") format("woff");
|
||||
/// font-style: normal;
|
||||
/// font-weight: 400;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} _font-source-declaration
|
||||
///
|
||||
/// @require {function} _retrieve-bourbon-setting
|
||||
|
||||
@mixin font-face(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
|
||||
$asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
|
||||
) {
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
src: _font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats
|
||||
);
|
||||
@content;
|
||||
}
|
||||
}
|
||||
87
_sass/bourbon/bourbon/library/_font-stacks.scss
vendored
87
_sass/bourbon/bourbon/library/_font-stacks.scss
vendored
@ -1,87 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
////
|
||||
/// @type list
|
||||
///
|
||||
/// @link goo.gl/Cxb26i
|
||||
////
|
||||
|
||||
$font-stack-helvetica: (
|
||||
"Helvetica Neue",
|
||||
"Helvetica",
|
||||
"Arial",
|
||||
sans-serif,
|
||||
);
|
||||
|
||||
$font-stack-lucida-grande: (
|
||||
"Lucida Grande",
|
||||
"Lucida Sans Unicode",
|
||||
"Geneva",
|
||||
"Verdana",
|
||||
sans-serif,
|
||||
);
|
||||
|
||||
$font-stack-verdana: (
|
||||
"Verdana",
|
||||
"Geneva",
|
||||
sans-serif,
|
||||
);
|
||||
|
||||
$font-stack-system: (
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"Roboto",
|
||||
"Oxygen",
|
||||
"Ubuntu",
|
||||
"Cantarell",
|
||||
"Fira Sans",
|
||||
"Droid Sans",
|
||||
"Helvetica Neue",
|
||||
sans-serif,
|
||||
);
|
||||
|
||||
$font-stack-garamond: (
|
||||
"Garamond",
|
||||
"Baskerville",
|
||||
"Baskerville Old Face",
|
||||
"Hoefler Text",
|
||||
"Times New Roman",
|
||||
serif,
|
||||
);
|
||||
|
||||
$font-stack-georgia: (
|
||||
"Georgia",
|
||||
"Times",
|
||||
"Times New Roman",
|
||||
serif,
|
||||
);
|
||||
|
||||
$font-stack-hoefler-text: (
|
||||
"Hoefler Text",
|
||||
"Baskerville Old Face",
|
||||
"Garamond",
|
||||
"Times New Roman",
|
||||
serif,
|
||||
);
|
||||
|
||||
$font-stack-consolas: (
|
||||
"Consolas",
|
||||
"monaco",
|
||||
monospace,
|
||||
);
|
||||
|
||||
$font-stack-courier-new: (
|
||||
"Courier New",
|
||||
"Courier",
|
||||
"Lucida Sans Typewriter",
|
||||
"Lucida Typewriter",
|
||||
monospace,
|
||||
);
|
||||
|
||||
$font-stack-monaco: (
|
||||
"monaco",
|
||||
"Consolas",
|
||||
"Lucida Console",
|
||||
monospace,
|
||||
);
|
||||
24
_sass/bourbon/bourbon/library/_hide-text.scss
vendored
24
_sass/bourbon/bourbon/library/_hide-text.scss
vendored
@ -1,24 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Hides the text in an element, commonly used to show an image instead. Some
|
||||
/// elements will need block-level styles applied.
|
||||
///
|
||||
/// @link http://goo.gl/EvLRIu
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include hide-text;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// overflow: hidden;
|
||||
/// text-indent: 101%;
|
||||
/// white-space: nowrap;
|
||||
/// }
|
||||
|
||||
@mixin hide-text {
|
||||
overflow: hidden;
|
||||
text-indent: 101%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Hides an element visually while still allowing the content to be accessible
|
||||
/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
|
||||
/// the affects of the hiding, which is handy for showing the element on focus,
|
||||
/// for example.
|
||||
///
|
||||
/// @link http://goo.gl/Vf1TGn
|
||||
///
|
||||
/// @argument {string} $toggle [hide]
|
||||
/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include hide-visually;
|
||||
///
|
||||
/// &:active,
|
||||
/// &:focus {
|
||||
/// @include hide-visually(unhide);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// border: 0;
|
||||
/// clip: rect(1px, 1px, 1px, 1px);
|
||||
/// clip-path: circle(1% at 1% 1%);
|
||||
/// height: 1px;
|
||||
/// overflow: hidden;
|
||||
/// padding: 0;
|
||||
/// position: absolute;
|
||||
/// width: 1px;
|
||||
/// }
|
||||
///
|
||||
/// .hide-visually:active,
|
||||
/// .hide-visually:focus {
|
||||
/// clip: auto;
|
||||
/// clip-path: none;
|
||||
/// height: auto;
|
||||
/// overflow: visible;
|
||||
/// position: static;
|
||||
/// width: auto;
|
||||
/// }
|
||||
///
|
||||
/// @since 5.0.0
|
||||
|
||||
@mixin hide-visually($toggle: hide) {
|
||||
@if $toggle == "hide" {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: circle(1% at 1% 1%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
} @else if $toggle == "unhide" {
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
34
_sass/bourbon/bourbon/library/_margin.scss
vendored
34
_sass/bourbon/bourbon/library/_margin.scss
vendored
@ -1,34 +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.
|
||||
///
|
||||
/// @argument {arglist} $values
|
||||
/// List of margin values, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element-one {
|
||||
/// @include margin(null auto);
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// @include margin(10px 3em 20vh null);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element-one {
|
||||
/// margin-left: auto;
|
||||
/// margin-right: auto;
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// margin-bottom: 20vh;
|
||||
/// margin-right: 3em;
|
||||
/// margin-top: 10px;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} _directional-property
|
||||
|
||||
@mixin margin($values...) {
|
||||
@include _directional-property(margin, false, $values...);
|
||||
}
|
||||
113
_sass/bourbon/bourbon/library/_modular-scale.scss
vendored
113
_sass/bourbon/bourbon/library/_modular-scale.scss
vendored
@ -1,113 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Increments up or down a defined scale and returns an adjusted value. This
|
||||
/// helps establish consistent measurements and spacial relationships throughout
|
||||
/// your project. We provide a list of commonly used scales as
|
||||
/// [pre-defined variables][scales].
|
||||
///
|
||||
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/settings/_scales.scss
|
||||
///
|
||||
/// @argument {number (unitless)} $increment
|
||||
/// How many steps to increment up or down the scale.
|
||||
///
|
||||
/// @argument {number (with unit) | list} $value [1em]
|
||||
/// The base value the scale starts at.
|
||||
///
|
||||
/// @argument {number (unitless)} $ratio [1.25]
|
||||
/// The ratio the scale is built on.
|
||||
///
|
||||
/// @return {number (with unit)}
|
||||
///
|
||||
/// @example scss
|
||||
/// .first-element {
|
||||
/// font-size: modular-scale(2);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// margin-right: modular-scale(3, 2em);
|
||||
/// }
|
||||
///
|
||||
/// .third-element {
|
||||
/// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
|
||||
/// }
|
||||
///
|
||||
/// // Globally change the base ratio
|
||||
/// $bourbon: (
|
||||
/// "modular-scale-ratio": 1.2,
|
||||
/// );
|
||||
///
|
||||
/// .fourth-element {
|
||||
/// font-size: modular-scale(3);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .first-element {
|
||||
/// font-size: 1.5625em;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// margin-right: 3.90625em;
|
||||
/// }
|
||||
///
|
||||
/// .third-element {
|
||||
/// font-size: 3em;
|
||||
/// }
|
||||
///
|
||||
/// .fourth-element {
|
||||
/// font-size: 1.728em;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} _retrieve-bourbon-setting
|
||||
|
||||
@function modular-scale(
|
||||
$increment,
|
||||
$value: _retrieve-bourbon-setting("modular-scale-base"),
|
||||
$ratio: _retrieve-bourbon-setting("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;
|
||||
}
|
||||
34
_sass/bourbon/bourbon/library/_padding.scss
vendored
34
_sass/bourbon/bourbon/library/_padding.scss
vendored
@ -1,34 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for targeting `padding` on specific sides of a
|
||||
/// box. Use a `null` value to “skip” a side.
|
||||
///
|
||||
/// @argument {arglist} $values
|
||||
/// List of padding values, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element-one {
|
||||
/// @include padding(null 1rem);
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// @include padding(10vh null 10px 5%);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element-one {
|
||||
/// padding-left: 1rem;
|
||||
/// padding-right: 1rem;
|
||||
/// }
|
||||
///
|
||||
/// .element-two {
|
||||
/// padding-bottom: 10px;
|
||||
/// padding-left: 5%;
|
||||
/// padding-top: 10vh;
|
||||
/// }
|
||||
///
|
||||
/// @require {mixin} _directional-property
|
||||
|
||||
@mixin padding($values...) {
|
||||
@include _directional-property(padding, false, $values...);
|
||||
}
|
||||
54
_sass/bourbon/bourbon/library/_position.scss
vendored
54
_sass/bourbon/bourbon/library/_position.scss
vendored
@ -1,54 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides a quick method for setting an element’s position. Use a `null`
|
||||
/// value to “skip” a side.
|
||||
///
|
||||
/// @argument {string} $position [relative]
|
||||
/// A CSS position value.
|
||||
///
|
||||
/// @argument {arglist} $coordinates [null]
|
||||
/// List of lengths, defined as CSS shorthand.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include position(absolute, 0 null null 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// left: 10em;
|
||||
/// position: absolute;
|
||||
/// top: 0;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} _is-length
|
||||
///
|
||||
/// @require {function} _unpack
|
||||
|
||||
@mixin position(
|
||||
$position: relative,
|
||||
$coordinates: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
_sass/bourbon/bourbon/library/_prefixer.scss
vendored
38
_sass/bourbon/bourbon/library/_prefixer.scss
vendored
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates vendor prefixes.
|
||||
///
|
||||
/// @argument {string} $property
|
||||
/// Property to prefix.
|
||||
///
|
||||
/// @argument {string} $value
|
||||
/// Value to use.
|
||||
///
|
||||
/// @argument {list} $prefixes
|
||||
/// Vendor prefixes to output.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include prefixer(appearance, none, ("webkit", "moz"));
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// -webkit-appearance: none;
|
||||
/// -moz-appearance: none;
|
||||
/// appearance: none;
|
||||
/// }
|
||||
///
|
||||
/// @author Hugo Giraudel
|
||||
|
||||
@mixin prefixer(
|
||||
$property,
|
||||
$value,
|
||||
$prefixes: ()
|
||||
) {
|
||||
|
||||
@each $prefix in $prefixes {
|
||||
#{"-" + $prefix + "-" + $property}: $value;
|
||||
}
|
||||
#{$property}: $value;
|
||||
}
|
||||
33
_sass/bourbon/bourbon/library/_shade.scss
vendored
33
_sass/bourbon/bourbon/library/_shade.scss
vendored
@ -1,33 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with black.
|
||||
///
|
||||
/// @argument {color} $color
|
||||
///
|
||||
/// @argument {number (percentage)} $percent
|
||||
/// The amount of black to be mixed in.
|
||||
///
|
||||
/// @return {color}
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// background-color: shade(#ffbb52, 60%);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// background-color: #664a20;
|
||||
/// }
|
||||
|
||||
@function shade(
|
||||
$color,
|
||||
$percent
|
||||
) {
|
||||
|
||||
@if not _is-color($color) {
|
||||
@error "`#{$color}` is not a valid color for the `$color` argument in " +
|
||||
"the `shade` mixin.";
|
||||
} @else {
|
||||
@return mix(#000, $color, $percent);
|
||||
}
|
||||
}
|
||||
49
_sass/bourbon/bourbon/library/_size.scss
vendored
49
_sass/bourbon/bourbon/library/_size.scss
vendored
@ -1,49 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Sets the `width` and `height` of the element in one statement.
|
||||
///
|
||||
/// @argument {number (with unit) | string} $width
|
||||
///
|
||||
/// @argument {number (with unit) | string} $height [$width]
|
||||
///
|
||||
/// @example scss
|
||||
/// .first-element {
|
||||
/// @include size(2em);
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// @include size(auto, 10em);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .first-element {
|
||||
/// width: 2em;
|
||||
/// height: 2em;
|
||||
/// }
|
||||
///
|
||||
/// .second-element {
|
||||
/// width: auto;
|
||||
/// height: 10em;
|
||||
/// }
|
||||
///
|
||||
/// @require {function} _is-size
|
||||
|
||||
@mixin size(
|
||||
$width,
|
||||
$height: $width
|
||||
) {
|
||||
|
||||
@if _is-size($height) {
|
||||
height: $height;
|
||||
} @else {
|
||||
@error "`#{$height}` is not a valid length for the `$height` argument " +
|
||||
"in the `size` mixin.";
|
||||
}
|
||||
|
||||
@if _is-size($width) {
|
||||
width: $width;
|
||||
} @else {
|
||||
@error "`#{$width}` is not a valid length for the `$width` argument " +
|
||||
"in the `size` mixin.";
|
||||
}
|
||||
}
|
||||
17
_sass/bourbon/bourbon/library/_strip-unit.scss
vendored
17
_sass/bourbon/bourbon/library/_strip-unit.scss
vendored
@ -1,17 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Strips the unit from a number.
|
||||
///
|
||||
/// @argument {number} $value
|
||||
///
|
||||
/// @return {number (unitless)}
|
||||
///
|
||||
/// @example scss
|
||||
/// $dimension: strip-unit(10em);
|
||||
///
|
||||
/// @example css
|
||||
/// $dimension: 10;
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
||||
163
_sass/bourbon/bourbon/library/_text-inputs.scss
vendored
163
_sass/bourbon/bourbon/library/_text-inputs.scss
vendored
@ -1,163 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
////
|
||||
/// @type list
|
||||
///
|
||||
/// @require {function} _assign-inputs
|
||||
///
|
||||
/// @require {variable} $_text-inputs-list
|
||||
////
|
||||
|
||||
/// A list of all _text-based_ HTML inputs. Please note that you must
|
||||
/// interpolate the variable (`#{}`) to use it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-text-inputs} {
|
||||
/// border: 1px solid #ccc;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// [type='color'],
|
||||
/// [type='date'],
|
||||
/// [type='datetime'],
|
||||
/// [type='datetime-local'],
|
||||
/// [type='email'],
|
||||
/// [type='month'],
|
||||
/// [type='number'],
|
||||
/// [type='password'],
|
||||
/// [type='search'],
|
||||
/// [type='tel'],
|
||||
/// [type='text'],
|
||||
/// [type='time'],
|
||||
/// [type='url'],
|
||||
/// [type='week'],
|
||||
/// input:not([type]),
|
||||
/// textarea {
|
||||
/// border: 1px solid #ccc;
|
||||
/// }
|
||||
|
||||
$all-text-inputs: _assign-inputs($_text-inputs-list);
|
||||
|
||||
/// A list of all _text-based_ HTML inputs with the `:active` pseudo-class
|
||||
/// applied. Please note that you must interpolate the variable (`#{}`) to use
|
||||
/// it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-text-inputs-active} {
|
||||
/// border: 1px solid #aaa;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// [type='color']:active,
|
||||
/// [type='date']:active,
|
||||
/// [type='datetime']:active,
|
||||
/// [type='datetime-local']:active,
|
||||
/// [type='email']:active,
|
||||
/// [type='month']:active,
|
||||
/// [type='number']:active,
|
||||
/// [type='password']:active,
|
||||
/// [type='search']:active,
|
||||
/// [type='tel']:active,
|
||||
/// [type='text']:active,
|
||||
/// [type='time']:active,
|
||||
/// [type='url']:active,
|
||||
/// [type='week']:active,
|
||||
/// input:not([type]):active,
|
||||
/// textarea:active {
|
||||
/// border: 1px solid #aaa;
|
||||
/// }
|
||||
|
||||
$all-text-inputs-active: _assign-inputs($_text-inputs-list, active);
|
||||
|
||||
/// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class
|
||||
/// applied. Please note that you must interpolate the variable (`#{}`) to use
|
||||
/// it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-text-inputs-focus} {
|
||||
/// border: 1px solid #1565c0;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// [type='color']:focus,
|
||||
/// [type='date']:focus,
|
||||
/// [type='datetime']:focus,
|
||||
/// [type='datetime-local']:focus,
|
||||
/// [type='email']:focus,
|
||||
/// [type='month']:focus,
|
||||
/// [type='number']:focus,
|
||||
/// [type='password']:focus,
|
||||
/// [type='search']:focus,
|
||||
/// [type='tel']:focus,
|
||||
/// [type='text']:focus,
|
||||
/// [type='time']:focus,
|
||||
/// [type='url']:focus,
|
||||
/// [type='week']:focus,
|
||||
/// input:not([type]):focus,
|
||||
/// textarea:focus {
|
||||
/// border: 1px solid #1565c0;
|
||||
/// }
|
||||
|
||||
$all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus);
|
||||
|
||||
/// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class
|
||||
/// applied. Please note that you must interpolate the variable (`#{}`) to use
|
||||
/// it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-text-inputs-hover} {
|
||||
/// border: 1px solid #aaa;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// [type='color']:hover,
|
||||
/// [type='date']:hover,
|
||||
/// [type='datetime']:hover,
|
||||
/// [type='datetime-local']:hover,
|
||||
/// [type='email']:hover,
|
||||
/// [type='month']:hover,
|
||||
/// [type='number']:hover,
|
||||
/// [type='password']:hover,
|
||||
/// [type='search']:hover,
|
||||
/// [type='tel']:hover,
|
||||
/// [type='text']:hover,
|
||||
/// [type='time']:hover,
|
||||
/// [type='url']:hover,
|
||||
/// [type='week']:hover,
|
||||
/// input:not([type]):hover,
|
||||
/// textarea:hover {
|
||||
/// border: 1px solid #aaa;
|
||||
/// }
|
||||
|
||||
$all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover);
|
||||
|
||||
/// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class
|
||||
/// applied. Please note that you must interpolate the variable (`#{}`) to use
|
||||
/// it as a selector.
|
||||
///
|
||||
/// @example scss
|
||||
/// #{$all-text-inputs-invalid} {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// [type='color']:invalid,
|
||||
/// [type='date']:invalid,
|
||||
/// [type='datetime']:invalid,
|
||||
/// [type='datetime-local']:invalid,
|
||||
/// [type='email']:invalid,
|
||||
/// [type='month']:invalid,
|
||||
/// [type='number']:invalid,
|
||||
/// [type='password']:invalid,
|
||||
/// [type='search']:invalid,
|
||||
/// [type='tel']:invalid,
|
||||
/// [type='text']:invalid,
|
||||
/// [type='time']:invalid,
|
||||
/// [type='url']:invalid,
|
||||
/// [type='week']:invalid,
|
||||
/// input:not([type]):invalid,
|
||||
/// textarea:invalid {
|
||||
/// border: 1px solid #00f;
|
||||
/// }
|
||||
|
||||
$all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid);
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// scss-lint:disable SpaceAfterComma, UnnecessaryMantissa, TrailingZero
|
||||
|
||||
////
|
||||
/// CSS cubic-bezier timing functions.
|
||||
///
|
||||
/// @link http://goo.gl/p8u6SK
|
||||
///
|
||||
/// @type string
|
||||
////
|
||||
|
||||
$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);
|
||||
33
_sass/bourbon/bourbon/library/_tint.scss
vendored
33
_sass/bourbon/bourbon/library/_tint.scss
vendored
@ -1,33 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Mixes a color with white.
|
||||
///
|
||||
/// @argument {color} $color
|
||||
///
|
||||
/// @argument {number (percentage)} $percent
|
||||
/// The amount of white to be mixed in.
|
||||
///
|
||||
/// @return {color}
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// background-color: tint(#6ecaa6, 40%);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// background-color: #a8dfc9;
|
||||
/// }
|
||||
|
||||
@function tint(
|
||||
$color,
|
||||
$percent
|
||||
) {
|
||||
|
||||
@if not _is-color($color) {
|
||||
@error "`#{$color}` is not a valid color for the `$color` argument in " +
|
||||
"the `tint` mixin.";
|
||||
} @else {
|
||||
@return mix(#fff, $color, $percent);
|
||||
}
|
||||
}
|
||||
82
_sass/bourbon/bourbon/library/_triangle.scss
vendored
82
_sass/bourbon/bourbon/library/_triangle.scss
vendored
@ -1,82 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates a triangle pointing in a specified direction.
|
||||
///
|
||||
/// @argument {string} $direction [up]
|
||||
/// The direction the triangle should point. Accepts `up`, `up-right`,
|
||||
/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
|
||||
///
|
||||
/// @argument {color} $color [currentColor]
|
||||
/// Color of the triangle.
|
||||
///
|
||||
/// @argument {number (with unit)} $width [1rem]
|
||||
/// Width of the triangle.
|
||||
///
|
||||
/// @argument {number (with unit)} $height [($width / 2)]
|
||||
/// Height of the triangle.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// &::before {
|
||||
/// @include triangle(up, #b25c9c, 2rem);
|
||||
/// content: "";
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element::before {
|
||||
/// border-style: solid;
|
||||
/// height: 0;
|
||||
/// width: 0;
|
||||
/// border-color: transparent transparent #b25c9c transparent;
|
||||
/// border-width: 0 1rem 1rem;
|
||||
/// content: "";
|
||||
/// }
|
||||
|
||||
@mixin triangle(
|
||||
$direction: up,
|
||||
$color: currentColor,
|
||||
$width: 1rem,
|
||||
$height: ($width / 2)
|
||||
) {
|
||||
@if not index(
|
||||
"up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
|
||||
$direction
|
||||
) {
|
||||
@error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
|
||||
"`down`, `down-left`, `left` or `up-left`.";
|
||||
} @else if not _is-color($color) {
|
||||
@error "`#{$color}` is not a valid color for the `$color` argument in " +
|
||||
"the `triangle` mixin.";
|
||||
} @else {
|
||||
border-style: solid;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if $direction == "up" {
|
||||
border-color: transparent transparent $color;
|
||||
border-width: 0 ($width / 2) $height;
|
||||
} @else if $direction == "up-right" {
|
||||
border-color: transparent $color transparent transparent;
|
||||
border-width: 0 $width $width 0;
|
||||
} @else if $direction == "right" {
|
||||
border-color: transparent transparent transparent $color;
|
||||
border-width: ($height / 2) 0 ($height / 2) $width;
|
||||
} @else if $direction == "down-right" {
|
||||
border-color: transparent transparent $color;
|
||||
border-width: 0 0 $width $width;
|
||||
} @else if $direction == "down" {
|
||||
border-color: $color transparent transparent;
|
||||
border-width: $height ($width / 2) 0;
|
||||
} @else if $direction == "down-left" {
|
||||
border-color: transparent transparent transparent $color;
|
||||
border-width: $width 0 0 $width;
|
||||
} @else if $direction == "left" {
|
||||
border-color: transparent $color transparent transparent;
|
||||
border-width: ($height / 2) $width ($height / 2) 0;
|
||||
} @else if $direction == "up-left" {
|
||||
border-color: $color transparent transparent;
|
||||
border-width: $width $width 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Generates vendor prefixes for values.
|
||||
///
|
||||
/// @argument {string} $property
|
||||
/// Property to use.
|
||||
///
|
||||
/// @argument {string} $value
|
||||
/// Value to prefix.
|
||||
///
|
||||
/// @argument {list} $prefixes
|
||||
/// Vendor prefixes to output.
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// @include value-prefixer(cursor, grab, ("webkit", "moz"));
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// cursor: -webkit-grab;
|
||||
/// cursor: -moz-grab;
|
||||
/// cursor: grab;
|
||||
/// }
|
||||
///
|
||||
/// @author Matthew Tobiasz
|
||||
|
||||
@mixin value-prefixer(
|
||||
$property,
|
||||
$value,
|
||||
$prefixes: ()
|
||||
) {
|
||||
|
||||
@each $prefix in $prefixes {
|
||||
#{$property}: #{"-" + $prefix + "-" + $value};
|
||||
}
|
||||
#{$property}: $value;
|
||||
}
|
||||
29
_sass/bourbon/bourbon/library/_word-wrap.scss
vendored
29
_sass/bourbon/bourbon/library/_word-wrap.scss
vendored
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Provides an easy way to change the `word-wrap` property.
|
||||
///
|
||||
/// @argument {string} $wrap [break-word]
|
||||
/// Value for the `word-break` property.
|
||||
///
|
||||
/// @example scss
|
||||
/// .wrapper {
|
||||
/// @include word-wrap(break-word);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .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;
|
||||
}
|
||||
}
|
||||
51
_sass/bourbon/bourbon/settings/_settings.scss
vendored
51
_sass/bourbon/bourbon/settings/_settings.scss
vendored
@ -1,51 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Default Bourbon configuration settings.
|
||||
///
|
||||
/// @type map
|
||||
///
|
||||
/// @property {color} contrast-switch-dark-color [#000]
|
||||
/// Global dark color for the `contrast-switch` function.
|
||||
///
|
||||
/// @property {color} contrast-switch-light-color [#fff]
|
||||
/// Global light color for the `contrast-switch` function.
|
||||
///
|
||||
/// @property {list} global-font-file-formats [("ttf", "woff2", "woff")]
|
||||
/// Global font file formats for the `font-face` mixin.
|
||||
///
|
||||
/// @property {number (with unit)} modular-scale-base [1em]
|
||||
/// Global base value for the `modular-scale` function.
|
||||
///
|
||||
/// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
|
||||
/// Global base ratio for the `modular-scale` function.
|
||||
///
|
||||
/// @property {boolean} rails-asset-pipeline [false]
|
||||
/// Enable or disable the `$asset-pipeline` variable for all functions that
|
||||
/// accept it.
|
||||
///
|
||||
/// @access private
|
||||
|
||||
$_bourbon-defaults: (
|
||||
"contrast-switch-dark-color": #000,
|
||||
"contrast-switch-light-color": #fff,
|
||||
"global-font-file-formats": ("ttf", "woff2", "woff"),
|
||||
"modular-scale-base": 1em,
|
||||
"modular-scale-ratio": $major-third,
|
||||
"rails-asset-pipeline": false,
|
||||
);
|
||||
|
||||
/// User overrides of Bourbon configuration settings.
|
||||
///
|
||||
/// @type map
|
||||
///
|
||||
/// @example scss
|
||||
/// $bourbon: (
|
||||
/// "contrast-switch-dark-color": #000,
|
||||
/// "contrast-switch-light-color": #fff,
|
||||
/// "global-font-file-formats": ("ttf", "woff2", "woff"),
|
||||
/// "modular-scale-base": 1em,
|
||||
/// "modular-scale-ratio": $major-third,
|
||||
/// "rails-asset-pipeline": false,
|
||||
/// );
|
||||
|
||||
$bourbon: () !default;
|
||||
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Append pseudo-classes to a selector(s).
|
||||
///
|
||||
/// @argument {list | string} $inputs
|
||||
/// A selector, or list of selectors, to apply the pseudo-class to.
|
||||
///
|
||||
/// @argument {pseudo-class} $pseudo [null]
|
||||
/// The pseudo-class to be appended.
|
||||
///
|
||||
/// @return {list}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@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;
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// scss-lint:disable ElsePlacement
|
||||
|
||||
/// Directional-property mixins are shorthands for writing properties like
|
||||
/// the following.
|
||||
///
|
||||
/// @ignore You can also use `false` instead of `null`.
|
||||
///
|
||||
/// @argument {list} $values
|
||||
/// 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;
|
||||
/// }
|
||||
///
|
||||
/// @return {list}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _collapse-directionals($values) {
|
||||
$output: null;
|
||||
|
||||
$a: nth($values, 1);
|
||||
$b: if(length($values) < 2, $a, nth($values, 2));
|
||||
$c: if(length($values) < 3, $a, nth($values, 3));
|
||||
$d: if(length($values) < 2, $a, nth($values, if(length($values) < 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;
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// scss-lint:disable SpaceAroundOperator
|
||||
|
||||
/// Output directional properties, for instance `margin`.
|
||||
///
|
||||
/// @argument {string} $pre
|
||||
/// Prefix to use.
|
||||
///
|
||||
/// @argument {string} $suf
|
||||
/// Suffix to use.
|
||||
///
|
||||
/// @argument {list} $values
|
||||
/// List of values.
|
||||
///
|
||||
/// @require {function} _collapse-directionals
|
||||
///
|
||||
/// @require {function} _contains-falsy
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@mixin _directional-property(
|
||||
$pre,
|
||||
$suf,
|
||||
$values
|
||||
) {
|
||||
|
||||
$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}", "");
|
||||
|
||||
$values: _collapse-directionals($values);
|
||||
|
||||
@if _contains-falsy($values) {
|
||||
@if nth($values, 1) { #{$top}: nth($values, 1); }
|
||||
|
||||
@if length($values) == 1 {
|
||||
@if nth($values, 1) { #{$right}: nth($values, 1); }
|
||||
} @else {
|
||||
@if nth($values, 2) { #{$right}: nth($values, 2); }
|
||||
}
|
||||
|
||||
@if length($values) == 2 {
|
||||
@if nth($values, 1) { #{$bottom}: nth($values, 1); }
|
||||
@if nth($values, 2) { #{$left}: nth($values, 2); }
|
||||
} @else if length($values) == 3 {
|
||||
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
|
||||
@if nth($values, 2) { #{$left}: nth($values, 2); }
|
||||
} @else if length($values) == 4 {
|
||||
@if nth($values, 3) { #{$bottom}: nth($values, 3); }
|
||||
@if nth($values, 4) { #{$left}: nth($values, 4); }
|
||||
}
|
||||
} @else {
|
||||
#{$all}: $values;
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Builds the `src` list for an `@font-face` declaration.
|
||||
///
|
||||
/// @link http://goo.gl/Ru1bKP
|
||||
///
|
||||
/// @argument {string} $font-family
|
||||
///
|
||||
/// @argument {string} $file-path
|
||||
///
|
||||
/// @argument {boolean} $asset-pipeline
|
||||
///
|
||||
/// @argument {list} $file-formats
|
||||
///
|
||||
/// @return {list}
|
||||
///
|
||||
/// @require {function} _contains
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _font-source-declaration(
|
||||
$font-family,
|
||||
$file-path,
|
||||
$asset-pipeline,
|
||||
$file-formats
|
||||
) {
|
||||
|
||||
$src: ();
|
||||
|
||||
$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;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Return a Bourbon setting.
|
||||
///
|
||||
/// @argument {string} $setting
|
||||
///
|
||||
/// @return {boolean | color | list | number | string}
|
||||
///
|
||||
/// @example scss
|
||||
/// _retrieve-bourbon-setting(rails-asset-pipeline)
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _retrieve-bourbon-setting($setting) {
|
||||
@return map-get(map-merge($_bourbon-defaults, $bourbon), $setting);
|
||||
}
|
||||
29
_sass/bourbon/bourbon/utilities/_unpack.scss
vendored
29
_sass/bourbon/bourbon/utilities/_unpack.scss
vendored
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Converts shorthand to the 4-value syntax.
|
||||
///
|
||||
/// @argument {list} $shorthand
|
||||
///
|
||||
/// @example scss
|
||||
/// .element {
|
||||
/// margin: _unpack(1em 2em);
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .element {
|
||||
/// margin: 1em 2em 1em 2em;
|
||||
/// }
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list does not contains a value.
|
||||
///
|
||||
/// @argument {list} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _contains-falsy($list) {
|
||||
@each $item in $list {
|
||||
@if not $item {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
27
_sass/bourbon/bourbon/validators/_contains.scss
vendored
27
_sass/bourbon/bourbon/validators/_contains.scss
vendored
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks if a list contains a value(s).
|
||||
///
|
||||
/// @argument {list} $list
|
||||
/// The list to check against.
|
||||
///
|
||||
/// @argument {list} $values
|
||||
/// A single value or list of values to check for.
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _contains(
|
||||
$list,
|
||||
$values...
|
||||
) {
|
||||
|
||||
@each $value in $values {
|
||||
@if type-of(index($list, $value)) != "number" {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
13
_sass/bourbon/bourbon/validators/_is-color.scss
vendored
13
_sass/bourbon/bourbon/validators/_is-color.scss
vendored
@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS color.
|
||||
///
|
||||
/// @argument {string} $color
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _is-color($color) {
|
||||
@return (type-of($color) == color) or ($color == "currentColor");
|
||||
}
|
||||
15
_sass/bourbon/bourbon/validators/_is-length.scss
vendored
15
_sass/bourbon/bourbon/validators/_is-length.scss
vendored
@ -1,15 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS length.
|
||||
///
|
||||
/// @argument {string} $value
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@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))));
|
||||
}
|
||||
23
_sass/bourbon/bourbon/validators/_is-light.scss
vendored
23
_sass/bourbon/bourbon/validators/_is-light.scss
vendored
@ -1,23 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Programatically determines whether a color is light or dark.
|
||||
///
|
||||
/// @link http://goo.gl/Dil4Y9
|
||||
///
|
||||
/// @argument {color (hex)} $hex-color
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @example scss
|
||||
/// is-light($color)
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@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;
|
||||
}
|
||||
15
_sass/bourbon/bourbon/validators/_is-number.scss
vendored
15
_sass/bourbon/bourbon/validators/_is-number.scss
vendored
@ -1,15 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid number.
|
||||
///
|
||||
/// @argument {number} $value
|
||||
///
|
||||
/// @require {function} _contains
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@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);
|
||||
}
|
||||
18
_sass/bourbon/bourbon/validators/_is-size.scss
vendored
18
_sass/bourbon/bourbon/validators/_is-size.scss
vendored
@ -1,18 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Checks for a valid CSS size.
|
||||
///
|
||||
/// @argument {string} $value
|
||||
///
|
||||
/// @return {boolean}
|
||||
///
|
||||
/// @require {function} _contains
|
||||
///
|
||||
/// @require {function} _is-length
|
||||
///
|
||||
/// @access private
|
||||
|
||||
@function _is-size($value) {
|
||||
@return _is-length($value)
|
||||
or _contains("fill" "fit-content" "min-content" "max-content", $value);
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// Functions
|
||||
@import "functions/private";
|
||||
@import "functions/new-breakpoint";
|
||||
|
||||
// Settings
|
||||
@import "settings/grid";
|
||||
@import "settings/visual-grid";
|
||||
@import "settings/disable-warnings";
|
||||
@ -1,23 +0,0 @@
|
||||
// Neat 1.7.4
|
||||
// http://neat.bourbon.io
|
||||
// Copyright 2012-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
// Helpers
|
||||
@import "neat-helpers";
|
||||
|
||||
// Grid
|
||||
@import "grid/private";
|
||||
@import "grid/box-sizing";
|
||||
@import "grid/omega";
|
||||
@import "grid/outer-container";
|
||||
@import "grid/span-columns";
|
||||
@import "grid/row";
|
||||
@import "grid/shift";
|
||||
@import "grid/pad";
|
||||
@import "grid/fill-parent";
|
||||
@import "grid/media";
|
||||
@import "grid/to-deprecate";
|
||||
@import "grid/visual-grid";
|
||||
@import "grid/display-context";
|
||||
@import "grid/direction-context";
|
||||
@ -1,49 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
|
||||
///
|
||||
/// @param {List} $query
|
||||
/// A list of media query features and values. Each `$feature` should have a corresponding `$value`.
|
||||
///
|
||||
/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
|
||||
///
|
||||
/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
|
||||
///
|
||||
/// @param {Number (unitless)} $total-columns [$grid-columns]
|
||||
/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// $mobile: new-breakpoint(max-width 480px 4);
|
||||
///
|
||||
/// .element {
|
||||
/// @include media($mobile) {
|
||||
/// @include span-columns(4);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// @media screen and (max-width: 480px) {
|
||||
/// .element {
|
||||
/// display: block;
|
||||
/// float: left;
|
||||
/// margin-right: 7.42297%;
|
||||
/// width: 100%;
|
||||
/// }
|
||||
/// .element:last-child {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
/// }
|
||||
|
||||
@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
|
||||
@if length($query) == 1 {
|
||||
$query: $default-feature nth($query, 1) $total-columns;
|
||||
} @else if is-even(length($query)) {
|
||||
$query: append($query, $total-columns);
|
||||
}
|
||||
|
||||
@if is-not(belongs-to($query, $visual-grid-breakpoints)) {
|
||||
$visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
|
||||
}
|
||||
|
||||
@return $query;
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
// Not function for Libsass compatibility
|
||||
// https://github.com/sass/libsass/issues/368
|
||||
@function is-not($value) {
|
||||
@return if($value, false, true);
|
||||
}
|
||||
|
||||
// Checks if a number is even
|
||||
@function is-even($int) {
|
||||
@return $int % 2 == 0;
|
||||
}
|
||||
|
||||
// Checks if an element belongs to a list or not
|
||||
@function belongs-to($tested-item, $list) {
|
||||
@return is-not(not-belongs-to($tested-item, $list));
|
||||
}
|
||||
|
||||
@function not-belongs-to($tested-item, $list) {
|
||||
@return is-not(index($list, $tested-item));
|
||||
}
|
||||
|
||||
// Contains display value
|
||||
@function contains-display-value($query) {
|
||||
@return belongs-to(table, $query)
|
||||
or belongs-to(block, $query)
|
||||
or belongs-to(inline-block, $query)
|
||||
or belongs-to(inline, $query);
|
||||
}
|
||||
|
||||
// Parses the first argument of span-columns()
|
||||
@function container-span($span: $span) {
|
||||
@if length($span) == 3 {
|
||||
$container-columns: nth($span, 3);
|
||||
@return $container-columns;
|
||||
} @else if length($span) == 2 {
|
||||
$container-columns: nth($span, 2);
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@return $grid-columns;
|
||||
}
|
||||
|
||||
@function container-shift($shift: $shift) {
|
||||
$parent-columns: $grid-columns !default !global;
|
||||
|
||||
@if length($shift) == 3 {
|
||||
$container-columns: nth($shift, 3);
|
||||
@return $container-columns;
|
||||
} @else if length($shift) == 2 {
|
||||
$container-columns: nth($shift, 2);
|
||||
@return $container-columns;
|
||||
}
|
||||
|
||||
@return $parent-columns;
|
||||
}
|
||||
|
||||
// Generates a striped background
|
||||
@function gradient-stops($grid-columns, $color: $visual-grid-color) {
|
||||
$transparent: transparent;
|
||||
|
||||
$column-width: flex-grid(1, $grid-columns);
|
||||
$gutter-width: flex-gutter($grid-columns);
|
||||
$column-offset: $column-width;
|
||||
|
||||
$values: ($transparent 0, $color 0);
|
||||
|
||||
@for $i from 1 to $grid-columns*2 {
|
||||
@if is-even($i) {
|
||||
$values: append($values, $transparent $column-offset, comma);
|
||||
$values: append($values, $color $column-offset, comma);
|
||||
$column-offset: $column-offset + $column-width;
|
||||
} @else {
|
||||
$values: append($values, $color $column-offset, comma);
|
||||
$values: append($values, $transparent $column-offset, comma);
|
||||
$column-offset: $column-offset + $gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
@return $values;
|
||||
}
|
||||
|
||||
// Layout direction
|
||||
@function get-direction($layout, $default) {
|
||||
$direction: null;
|
||||
|
||||
@if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
|
||||
$direction: direction-from-layout($layout);
|
||||
} @else {
|
||||
$direction: direction-from-layout($default);
|
||||
}
|
||||
|
||||
@return $direction;
|
||||
}
|
||||
|
||||
@function direction-from-layout($layout) {
|
||||
$direction: null;
|
||||
|
||||
@if to-upper-case($layout) == "LTR" {
|
||||
$direction: right;
|
||||
} @else {
|
||||
$direction: left;
|
||||
}
|
||||
|
||||
@return $direction;
|
||||
}
|
||||
|
||||
@function get-opposite-direction($direction) {
|
||||
$opposite-direction: left;
|
||||
|
||||
@if $direction == "left" {
|
||||
$opposite-direction: right;
|
||||
}
|
||||
|
||||
@return $opposite-direction;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@if $border-box-sizing == true {
|
||||
html { // http://bit.ly/1qk2tVR
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
&,
|
||||
&::after,
|
||||
&::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Changes the direction property used by other mixins called in the code block argument.
|
||||
///
|
||||
/// @param {String} $direction [left-to-right]
|
||||
/// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// @include direction-context(right-to-left) {
|
||||
/// .right-to-left-block {
|
||||
/// @include span-columns(6);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .right-to-left-block {
|
||||
/// float: right;
|
||||
/// ...
|
||||
/// }
|
||||
|
||||
@mixin direction-context($direction: left-to-right) {
|
||||
$scope-direction: $layout-direction;
|
||||
|
||||
@if to-lower-case($direction) == "left-to-right" {
|
||||
$layout-direction: LTR !global;
|
||||
} @else if to-lower-case($direction) == "right-to-left" {
|
||||
$layout-direction: RTL !global;
|
||||
}
|
||||
|
||||
@content;
|
||||
|
||||
$layout-direction: $scope-direction !global;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Changes the display property used by other mixins called in the code block argument.
|
||||
///
|
||||
/// @param {String} $display [block]
|
||||
/// Display value to be used within the block. Can be `table` or `block`.
|
||||
///
|
||||
/// @example scss
|
||||
/// @include display-context(table) {
|
||||
/// .display-table {
|
||||
/// @include span-columns(6);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css
|
||||
/// .display-table {
|
||||
/// display: table-cell;
|
||||
/// ...
|
||||
/// }
|
||||
|
||||
@mixin display-context($display: block) {
|
||||
$scope-display: $container-display-table;
|
||||
$container-display-table: $display == table !global;
|
||||
|
||||
@content;
|
||||
|
||||
$container-display-table: $scope-display !global;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Forces the element to fill its parent container.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include fill-parent;
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// width: 100%;
|
||||
/// box-sizing: border-box;
|
||||
/// }
|
||||
|
||||
@mixin fill-parent() {
|
||||
width: 100%;
|
||||
|
||||
@if $border-box-sizing == false {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).
|
||||
///
|
||||
/// @param {List} $query
|
||||
/// A list of media query features and values, where each `$feature` should have a corresponding `$value`.
|
||||
/// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
|
||||
///
|
||||
/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
|
||||
///
|
||||
/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).
|
||||
///
|
||||
///
|
||||
/// @param {Number (unitless)} $total-columns [$grid-columns]
|
||||
/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .responsive-element {
|
||||
/// @include media(769px) {
|
||||
/// @include span-columns(6);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// .new-context-element {
|
||||
/// @include media(min-width 320px max-width 480px, 6) {
|
||||
/// @include span-columns(6);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// @media screen and (min-width: 769px) {
|
||||
/// .responsive-element {
|
||||
/// display: block;
|
||||
/// float: left;
|
||||
/// margin-right: 2.35765%;
|
||||
/// width: 48.82117%;
|
||||
/// }
|
||||
///
|
||||
/// .responsive-element:last-child {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @media screen and (min-width: 320px) and (max-width: 480px) {
|
||||
/// .new-context-element {
|
||||
/// display: block;
|
||||
/// float: left;
|
||||
/// margin-right: 4.82916%;
|
||||
/// width: 100%;
|
||||
/// }
|
||||
///
|
||||
/// .new-context-element:last-child {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
/// }
|
||||
|
||||
@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
|
||||
@if length($query) == 1 {
|
||||
@media screen and ($default-feature: nth($query, 1)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns !global;
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns !global;
|
||||
}
|
||||
} @else {
|
||||
$loop-to: length($query);
|
||||
$media-query: "screen and ";
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns !global;
|
||||
|
||||
@if is-not(is-even(length($query))) {
|
||||
$grid-columns: nth($query, $loop-to) !global;
|
||||
$loop-to: $loop-to - 1;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $loop-to {
|
||||
$media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
|
||||
|
||||
@if ($i + 1) != $loop-to {
|
||||
$media-query: $media-query + "and ";
|
||||
}
|
||||
|
||||
$i: $i + 2;
|
||||
}
|
||||
|
||||
@media #{$media-query} {
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts.
|
||||
///
|
||||
/// @param {List} $query [block]
|
||||
/// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`).
|
||||
///
|
||||
/// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature.
|
||||
///
|
||||
/// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include omega;
|
||||
/// }
|
||||
///
|
||||
/// .nth-element {
|
||||
/// @include omega(4n);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
///
|
||||
/// .nth-element:nth-child(4n) {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
///
|
||||
/// .nth-element:nth-child(4n+1) {
|
||||
/// clear: left;
|
||||
/// }
|
||||
|
||||
@mixin omega($query: block, $direction: default) {
|
||||
$table: belongs-to(table, $query);
|
||||
$auto: belongs-to(auto, $query);
|
||||
|
||||
@if $direction != default {
|
||||
@include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
|
||||
} @else {
|
||||
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||
}
|
||||
|
||||
@if $table {
|
||||
@include -neat-warn("The omega mixin no longer removes padding in table layouts.");
|
||||
}
|
||||
|
||||
@if length($query) == 1 {
|
||||
@if $auto {
|
||||
&:last-child {
|
||||
margin-#{$direction}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@else if contains-display-value($query) and $table == false {
|
||||
margin-#{$direction}: 0;
|
||||
}
|
||||
|
||||
@else {
|
||||
@include nth-child($query, $direction);
|
||||
}
|
||||
} @else if length($query) == 2 {
|
||||
@if $auto {
|
||||
&:last-child {
|
||||
margin-#{$direction}: 0;
|
||||
}
|
||||
} @else {
|
||||
@include nth-child(nth($query, 1), $direction);
|
||||
}
|
||||
} @else {
|
||||
@include -neat-warn("Too many arguments passed to the omega() mixin.");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nth-child($query, $direction) {
|
||||
$opposite-direction: get-opposite-direction($direction);
|
||||
|
||||
&:nth-child(#{$query}) {
|
||||
margin-#{$direction}: 0;
|
||||
}
|
||||
|
||||
@if type-of($query) == number and unit($query) == "n" {
|
||||
&:nth-child(#{$query}+1) {
|
||||
clear: $opposite-direction;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`.
|
||||
/// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
|
||||
///
|
||||
/// @param {Number [unit]} $local-max-width [$max-width]
|
||||
/// Max width to be applied to the element. Can be a percentage or a measure.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include outer-container(100%);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// *zoom: 1;
|
||||
/// max-width: 100%;
|
||||
/// margin-left: auto;
|
||||
/// margin-right: auto;
|
||||
/// }
|
||||
///
|
||||
/// .element:before, .element:after {
|
||||
/// content: " ";
|
||||
/// display: table;
|
||||
/// }
|
||||
///
|
||||
/// .element:after {
|
||||
/// clear: both;
|
||||
/// }
|
||||
|
||||
@mixin outer-container($local-max-width: $max-width) {
|
||||
@include clearfix;
|
||||
max-width: $local-max-width;
|
||||
margin: {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Adds padding to the element.
|
||||
///
|
||||
/// @param {List} $padding [flex-gutter()]
|
||||
/// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include pad(30px -20px 10px default);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// padding: 30px -20px 10px 2.35765%;
|
||||
/// }
|
||||
|
||||
@mixin pad($padding: flex-gutter()) {
|
||||
$padding-list: null;
|
||||
@each $value in $padding {
|
||||
$value: if($value == 'default', flex-gutter(), $value);
|
||||
$padding-list: join($padding-list, $value);
|
||||
}
|
||||
padding: $padding-list;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
$parent-columns: $grid-columns !default;
|
||||
$fg-column: $column;
|
||||
$fg-gutter: $gutter;
|
||||
$fg-max-columns: $grid-columns;
|
||||
$container-display-table: false !default;
|
||||
$layout-direction: LTR !default;
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
@function grid-width($n) {
|
||||
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||
}
|
||||
|
||||
@function get-parent-columns($columns) {
|
||||
@if $columns != $grid-columns {
|
||||
$parent-columns: $columns !global;
|
||||
} @else {
|
||||
$parent-columns: $grid-columns !global;
|
||||
}
|
||||
|
||||
@return $parent-columns;
|
||||
}
|
||||
|
||||
@function is-display-table($container-is-display-table, $display) {
|
||||
@return $container-is-display-table == true or $display == table;
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout.
|
||||
///
|
||||
/// @param {String} $display [default]
|
||||
/// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`.
|
||||
///
|
||||
/// @param {String} $direction [$default-layout-direction]
|
||||
/// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left).
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include row();
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// *zoom: 1;
|
||||
/// display: block;
|
||||
/// }
|
||||
///
|
||||
/// .element:before, .element:after {
|
||||
/// content: " ";
|
||||
/// display: table;
|
||||
/// }
|
||||
///
|
||||
/// .element:after {
|
||||
/// clear: both;
|
||||
/// }
|
||||
|
||||
@mixin row($display: default, $direction: $default-layout-direction) {
|
||||
@if $direction != $default-layout-direction {
|
||||
@include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin.");
|
||||
}
|
||||
|
||||
$layout-direction: $direction !global;
|
||||
|
||||
@if $display != default {
|
||||
@include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin.");
|
||||
}
|
||||
|
||||
@if $display == table {
|
||||
display: table;
|
||||
@include fill-parent;
|
||||
table-layout: fixed;
|
||||
$container-display-table: true !global;
|
||||
} @else {
|
||||
@include clearfix;
|
||||
display: block;
|
||||
$container-display-table: false !global;
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction.
|
||||
///
|
||||
/// @param {Number (unitless)} $n-columns [1]
|
||||
/// Number of columns by which the element shifts.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include shift(-3);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS output
|
||||
/// .element {
|
||||
/// margin-left: -25.58941%;
|
||||
/// }
|
||||
|
||||
@mixin shift($n-columns: 1) {
|
||||
@include shift-in-context($n-columns);
|
||||
}
|
||||
|
||||
/// Translates an element horizontally by a number of columns, in a specific nesting context.
|
||||
///
|
||||
/// @param {List} $shift
|
||||
/// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`).
|
||||
///
|
||||
/// The two values can be separated with any string such as `of`, `/`, etc.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include shift(-3 of 6);
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS output
|
||||
/// .element {
|
||||
/// margin-left: -52.41458%;
|
||||
/// }
|
||||
|
||||
@mixin shift-in-context($shift: $columns of $container-columns) {
|
||||
$n-columns: nth($shift, 1);
|
||||
$parent-columns: container-shift($shift) !global;
|
||||
|
||||
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||
$opposite-direction: get-opposite-direction($direction);
|
||||
|
||||
margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
|
||||
|
||||
// Reset nesting context
|
||||
$parent-columns: $grid-columns !global;
|
||||
}
|
||||
@ -1,94 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.
|
||||
///
|
||||
/// @param {List} $span
|
||||
/// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional).
|
||||
///
|
||||
/// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid.
|
||||
///
|
||||
/// The values can be separated with any string such as `of`, `/`, etc.
|
||||
///
|
||||
/// `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.
|
||||
///
|
||||
/// @param {String} $display [block]
|
||||
/// Sets the display property of the element. By default it sets the display property of the element to `block`.
|
||||
///
|
||||
/// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.
|
||||
///
|
||||
/// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include span-columns(6);
|
||||
///
|
||||
/// .nested-element {
|
||||
/// @include span-columns(2 of 6);
|
||||
/// }
|
||||
/// }
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// .element {
|
||||
/// display: block;
|
||||
/// float: left;
|
||||
/// margin-right: 2.35765%;
|
||||
/// width: 48.82117%;
|
||||
/// }
|
||||
///
|
||||
/// .element:last-child {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
///
|
||||
/// .element .nested-element {
|
||||
/// display: block;
|
||||
/// float: left;
|
||||
/// margin-right: 4.82916%;
|
||||
/// width: 30.11389%;
|
||||
/// }
|
||||
///
|
||||
/// .element .nested-element:last-child {
|
||||
/// margin-right: 0;
|
||||
/// }
|
||||
|
||||
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
||||
$columns: nth($span, 1);
|
||||
$container-columns: container-span($span);
|
||||
|
||||
$parent-columns: get-parent-columns($container-columns) !global;
|
||||
|
||||
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||
$opposite-direction: get-opposite-direction($direction);
|
||||
|
||||
$display-table: is-display-table($container-display-table, $display);
|
||||
|
||||
@if $display-table {
|
||||
display: table-cell;
|
||||
width: percentage($columns / $container-columns);
|
||||
} @else {
|
||||
float: #{$opposite-direction};
|
||||
|
||||
@if $display != no-display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@if $display == collapse {
|
||||
@include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
|
||||
}
|
||||
|
||||
@if $display == collapse or $display == block-collapse {
|
||||
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
||||
|
||||
&:last-child {
|
||||
width: flex-grid($columns, $container-columns);
|
||||
}
|
||||
|
||||
} @else {
|
||||
margin-#{$direction}: flex-gutter($container-columns);
|
||||
width: flex-grid($columns, $container-columns);
|
||||
|
||||
&:last-child {
|
||||
margin-#{$direction}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
||||
@include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.");
|
||||
|
||||
@if length($query) == 1 {
|
||||
@media screen and ($default-feature: nth($query, 1)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
} @else if length($query) == 2 {
|
||||
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
} @else if length($query) == 3 {
|
||||
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: nth($query, 3);
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
} @else if length($query) == 4 {
|
||||
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: $total-columns;
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
} @else if length($query) == 5 {
|
||||
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||
$default-grid-columns: $grid-columns;
|
||||
$grid-columns: nth($query, 5);
|
||||
@content;
|
||||
$grid-columns: $default-grid-columns;
|
||||
}
|
||||
} @else {
|
||||
@include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details.");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nth-omega($nth, $display: block, $direction: default) {
|
||||
@include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead.");
|
||||
@include omega($nth $display, $direction);
|
||||
}
|
||||
|
||||
/// Resets the active display property to `block`. Particularly useful when changing the display property in a single row.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include row(table);
|
||||
/// // Context changed to table display
|
||||
/// }
|
||||
///
|
||||
/// @include reset-display;
|
||||
/// // Context is reset to block display
|
||||
|
||||
@mixin reset-display {
|
||||
$container-display-table: false !global;
|
||||
@include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.");
|
||||
}
|
||||
|
||||
/// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include row($direction: RTL);
|
||||
/// // Context changed to right-to-left
|
||||
/// }
|
||||
///
|
||||
/// @include reset-layout-direction;
|
||||
/// // Context is reset to left-to-right
|
||||
|
||||
@mixin reset-layout-direction {
|
||||
$layout-direction: $default-layout-direction !global;
|
||||
@include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.");
|
||||
}
|
||||
|
||||
/// Resets both the active layout direction and the active display property.
|
||||
///
|
||||
/// @example scss - Usage
|
||||
/// .element {
|
||||
/// @include row(table, RTL);
|
||||
/// // Context changed to table table and right-to-left
|
||||
/// }
|
||||
///
|
||||
/// @include reset-all;
|
||||
/// // Context is reset to block display and left-to-right
|
||||
|
||||
@mixin reset-all {
|
||||
@include reset-display;
|
||||
@include reset-layout-direction;
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@mixin grid-column-gradient($values...) {
|
||||
background-image: -webkit-linear-gradient(left, $values);
|
||||
background-image: -moz-linear-gradient(left, $values);
|
||||
background-image: -ms-linear-gradient(left, $values);
|
||||
background-image: -o-linear-gradient(left, $values);
|
||||
background-image: unquote("linear-gradient(to left, #{$values})");
|
||||
}
|
||||
|
||||
@if $visual-grid == true or $visual-grid == yes {
|
||||
body:before {
|
||||
@include grid-column-gradient(gradient-stops($grid-columns));
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
max-width: $max-width;
|
||||
opacity: $visual-grid-opacity;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
@if $visual-grid-index == back {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@else if $visual-grid-index == front {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@each $breakpoint in $visual-grid-breakpoints {
|
||||
@if $breakpoint {
|
||||
@include media($breakpoint) {
|
||||
@include grid-column-gradient(gradient-stops($grid-columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
|
||||
///
|
||||
/// @type Bool
|
||||
|
||||
$disable-warnings: false !default;
|
||||
|
||||
@mixin -neat-warn($message) {
|
||||
@if $disable-warnings == false {
|
||||
@warn "#{$message}";
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
|
||||
///
|
||||
/// @type Number (Unit)
|
||||
|
||||
$column: modular-scale(3, 1em, $golden) !default;
|
||||
|
||||
/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
|
||||
///
|
||||
/// @type Number (Unit)
|
||||
|
||||
$gutter: modular-scale(1, 1em, $golden) !default;
|
||||
|
||||
/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag.
|
||||
///
|
||||
/// @type Number (Unitless)
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
/// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag.
|
||||
///
|
||||
/// @type Number (Unit)
|
||||
///
|
||||
$max-width: 1200px !default;
|
||||
|
||||
/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
|
||||
///
|
||||
/// @type Bool
|
||||
///
|
||||
/// @example css - CSS Output
|
||||
/// html {
|
||||
/// box-sizing: border-box; }
|
||||
///
|
||||
/// *, *::after, *::before {
|
||||
/// box-sizing: inherit;
|
||||
/// }
|
||||
|
||||
$border-box-sizing: true !default;
|
||||
|
||||
/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag.
|
||||
///
|
||||
/// @type String
|
||||
|
||||
$default-feature: min-width; // Default @media feature for the breakpoint() mixin
|
||||
|
||||
///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag.
|
||||
///
|
||||
///@type String
|
||||
|
||||
$default-layout-direction: LTR !default;
|
||||
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag.
|
||||
///
|
||||
/// @type Bool
|
||||
|
||||
$visual-grid: false !default;
|
||||
|
||||
/// Sets the visual grid color. Set with `!global` flag.
|
||||
///
|
||||
/// @type Color
|
||||
|
||||
$visual-grid-color: #eee !default;
|
||||
|
||||
/// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag.
|
||||
///
|
||||
/// @type String
|
||||
|
||||
$visual-grid-index: back !default;
|
||||
|
||||
/// Sets the opacity property of the visual grid. Set with `!global` flag.
|
||||
///
|
||||
/// @type Number (unitless)
|
||||
|
||||
$visual-grid-opacity: 0.4 !default;
|
||||
|
||||
$visual-grid-breakpoints: () !default;
|
||||
282
_sass/sassline-base/_layouts.scss
Executable file
282
_sass/sassline-base/_layouts.scss
Executable file
@ -0,0 +1,282 @@
|
||||
// Layouts
|
||||
// ---------------------------------------
|
||||
|
||||
// Container.
|
||||
.section {
|
||||
@include clearfix;
|
||||
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 94%;
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include maxwidth(3);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include maxwidth(4);
|
||||
}
|
||||
}
|
||||
|
||||
// Single column (based on measure for typeset content).
|
||||
.single-measure {
|
||||
@include measure(all);
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Base column styles.
|
||||
.column {
|
||||
@include measure(0);
|
||||
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
float: left;
|
||||
margin: initial;
|
||||
max-width: initial;
|
||||
padding-left: map-get($gutterwidths, small);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Two columns.
|
||||
.column--duo {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 50%;
|
||||
|
||||
&:nth-of-type(2n+3) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(n+3) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Three columns.
|
||||
.column--trio {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 33.333%;
|
||||
|
||||
&:nth-of-type(3n+4) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
&:nth-of-type(n+4) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Four columns. Two at smaller breakpoints.
|
||||
.column--quad {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
// Two column layout with a main text column and a sidebar.
|
||||
|
||||
// Main column.
|
||||
.column--main {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar.
|
||||
.column--sidebar {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
}
|
||||
}
|
||||
|
||||
// If sidebar on the right side.
|
||||
.column--main + .column--sidebar {
|
||||
@include breakpoint(break-1) {
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
padding-left: map-get($gutterwidths, large);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the main text one level down in the modular scale for narrower columns.
|
||||
.column--trio,
|
||||
.column--quad,
|
||||
.column--sidebar {
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
|
||||
p {
|
||||
@include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
|
||||
}
|
||||
|
||||
li {
|
||||
@include fontsize(eta, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
|
||||
p {
|
||||
@include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
|
||||
}
|
||||
|
||||
li {
|
||||
@include fontsize(eta, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main column on the right with inline sidenotes.
|
||||
// The sidenotes will move out the column into the sidebar position aligned to the baseline.
|
||||
.column--right {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
@include ideal-measure(1, small, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
@include ideal-measure(2, small, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
@include ideal-measure(3, medium, false, margin-left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
@include ideal-measure(4, medium, false, margin-left);
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
|
||||
left: 0;
|
||||
padding-left: map-get($gutterwidths, small);
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
|
||||
padding-right: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main column on the left with inline sidenotes.
|
||||
.column--left {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium);
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
@include ideal-measure(1, small, false);
|
||||
@include ideal-measure(1, small, true, left);
|
||||
|
||||
padding-left: map-get($gutterwidths, medium);
|
||||
padding-right: map-get($gutterwidths, small);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(break-2) {
|
||||
@include ideal-measure(2, small, false);
|
||||
@include ideal-measure(2, small, true, left);
|
||||
}
|
||||
|
||||
@include breakpoint(break-3) {
|
||||
@include ideal-measure(3, medium, false);
|
||||
@include ideal-measure(3, medium, true, left);
|
||||
|
||||
padding-left: map-get($gutterwidths, large);
|
||||
}
|
||||
|
||||
@include breakpoint(break-4) {
|
||||
@include ideal-measure(4, medium, false);
|
||||
@include ideal-measure(4, medium, true, left);
|
||||
|
||||
padding-right: map-get($gutterwidths, medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
420
_sass/sassline-base/_mixins.scss
Executable file
420
_sass/sassline-base/_mixins.scss
Executable file
@ -0,0 +1,420 @@
|
||||
// SCSS mixins
|
||||
// ---------------------------------------
|
||||
|
||||
// Global variables used in mixins.
|
||||
|
||||
// Number of breakpoints.
|
||||
$breakpoints-limit: length($breakpoints);
|
||||
|
||||
// List of rootsizes, breakpoints, and max-widths.
|
||||
$sizes: map-values($rootsizes);
|
||||
$points: map-values($breakpoints);
|
||||
$line-widths: map-values($measures);
|
||||
$max-widths: map-values($maxwidths);
|
||||
|
||||
|
||||
// Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints.
|
||||
// Defaults to min-width, but both min->max and max-width are available too.
|
||||
// Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
|
||||
@mixin breakpoint($break: 0, $max: 0) {
|
||||
// Type of break variable
|
||||
$value: type-of($break);
|
||||
|
||||
// If it is a string (i.e. a breakpoint variable).
|
||||
@if $value == string {
|
||||
// If using 'break-1', 'break-2' etc output the correct breakpoints from map.
|
||||
@if map-has-key($breakpoints, $break) {
|
||||
@media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; }
|
||||
} @else {
|
||||
@warn "#{$break} is not a set breakpoint variable";
|
||||
}
|
||||
|
||||
// If it is a number, use this for the breakpoint.
|
||||
} @else if $value == number {
|
||||
// If using other numbers output value in ems either for min, min & max or max width breakpoints.
|
||||
$query: "all" !default;
|
||||
@if $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; }
|
||||
@else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; }
|
||||
@else if $break == 0 and $max != 0 { $query: "(max-width: #{$max / 16 * 1em})"; }
|
||||
@media #{$query} { @content; }
|
||||
|
||||
} @else {
|
||||
@warn "#{$break} is not valid to use as a breakpoint";
|
||||
}
|
||||
}
|
||||
|
||||
// Root font-size in %, outputted in correct breakpoints.
|
||||
@mixin rootsize {
|
||||
font-size: nth($sizes, 1) / 16 * 100%;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
font-size: nth($sizes, $i) / 16 * 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Max-widths for typeset containers, outputted in correct breakpoints.
|
||||
@mixin maxwidth($breakpoint: 0) {
|
||||
// Type of chosen variables.
|
||||
$break-value: type-of($breakpoint);
|
||||
|
||||
// If specifying a breakpoint to use (and breakpoint exists).
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
|
||||
|
||||
max-width: #{nth($max-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
|
||||
|
||||
} @else if $breakpoint == all {
|
||||
max-width: #{nth($max-widths, 1) / nth($sizes, 1)}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
max-width: #{nth($max-widths, $i) / nth($sizes, $i)}rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set the measure for single columns, outputted in correct breakpoints.
|
||||
@mixin measure($breakpoint: 0) {
|
||||
// Type of chosen variables.
|
||||
$break-value: type-of($breakpoint);
|
||||
|
||||
// If specifying a breakpoint to use (and breakpoint exists).
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
|
||||
|
||||
max-width: #{nth($line-widths, ($breakpoint + 1)) / nth($sizes, ($breakpoint + 1))}rem;
|
||||
|
||||
} @else if $breakpoint == all {
|
||||
max-width: #{nth($line-widths, 1) / nth($sizes, 1)}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
max-width: #{nth($line-widths, $i) / nth($sizes, $i)}rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate percentage width of container to get optimal measure for main text columns.
|
||||
// Defaults to all breakpoints.
|
||||
// Note: will not output for base breakpoint as this comes from the 'measure' mixin.
|
||||
@mixin ideal-measure($breakpoint: 0, $gutter: 0, $main: true, $output: max-width) {
|
||||
// Type of chosen variables.
|
||||
$break-value: type-of($breakpoint);
|
||||
|
||||
// If specifying a breakpoint to use (and breakpoint exists and is larger than 0).
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint > 0 {
|
||||
|
||||
@if $gutter == small {
|
||||
$gutter: map-get($gutterwidths, small) * 2 / 1rem;
|
||||
} @else if $gutter == medium {
|
||||
$gutter: map-get($gutterwidths, medium) * 2 / 1rem;
|
||||
} @else if $gutter == large {
|
||||
$gutter: map-get($gutterwidths, large) * 2 / 1rem;
|
||||
} @else {
|
||||
$gutter: 0;
|
||||
}
|
||||
|
||||
$rootsize: map-get($rootsizes, rootsize-#{$breakpoint});
|
||||
$ideal-measure: map-get($measures, measure-#{$breakpoint});
|
||||
$gutter-size: ($gutter * $rootsize);
|
||||
$container-width: map-get($maxwidths, width-#{$breakpoint});
|
||||
|
||||
$percentage: percentage(($ideal-measure + $gutter-size) / $container-width);
|
||||
|
||||
@if $percentage < 55 {
|
||||
$percentage: 55%;
|
||||
} @else if $percentage > 65 {
|
||||
$percentage: 65%;
|
||||
}
|
||||
|
||||
@if $main == false {
|
||||
$percentage: 100 - $percentage;
|
||||
}
|
||||
|
||||
#{$output}: $percentage;
|
||||
}
|
||||
}
|
||||
|
||||
// Value in scale in $modular-scale?
|
||||
// Used in following fontsize mixin.
|
||||
@function in-modular-scale($scale, $key) {
|
||||
$map: map-get($modular-scale, $scale);
|
||||
$output: map-has-key($map, $key);
|
||||
@return $output;
|
||||
}
|
||||
|
||||
// Font-size in rems. Either set per breakpoint or for all.
|
||||
// Use values as you would for pixels i.e. 16 or use values from the modular scale.
|
||||
@mixin fontsize($fontsize, $breakpoint: 0) {
|
||||
// Type of chosen variables.
|
||||
$font-value: type-of($fontsize);
|
||||
$break-value: type-of($breakpoint);
|
||||
|
||||
// Check if value exists in scale.
|
||||
$in-scale: in-modular-scale(scale-0, $fontsize);
|
||||
|
||||
// If specifying a breakpoint to use (and breakpoint exists).
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
|
||||
|
||||
// If using a number for fontsize.
|
||||
@if $font-value == number {
|
||||
font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
|
||||
|
||||
// If using a variable from the scale for fontsize.
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-#{$breakpoint});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
|
||||
font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
// If want to use value for all breakpoints.
|
||||
} @else if $breakpoint == all {
|
||||
|
||||
// If using a number for fontsize.
|
||||
@if $font-value == number {
|
||||
font-size: #{$fontsize / nth($sizes, 1)}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
font-size: #{$fontsize / nth($sizes, $i)}rem;
|
||||
}
|
||||
}
|
||||
|
||||
// If using a variable from the scale for fontsize.
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-0);
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
font-size: #{$get-size / nth($sizes, 1)}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$get-scale: map-get($modular-scale, scale-#{$i - 1});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
font-size: #{$get-size / nth($sizes, $i)}rem;
|
||||
}
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$breakpoint} is not valid to use as a breakpoint";
|
||||
}
|
||||
}
|
||||
|
||||
// Advanced baseline magic.
|
||||
// ! Read the README to help understand what is going on here.
|
||||
// Parts based on https://gist.github.com/razwan/10662500
|
||||
@mixin baseline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
|
||||
// Type of chosen variables.
|
||||
$font-value: type-of($fontsize);
|
||||
$break-value: type-of($breakpoint);
|
||||
|
||||
// Cap height
|
||||
$cap-height: map-get($font, cap-height);
|
||||
|
||||
// Check if value exists in scale.
|
||||
$in-scale: in-modular-scale(scale-0, $fontsize);
|
||||
|
||||
// Set the line-height (if it isn’t set at 0).
|
||||
@if $lineheight != 0 {
|
||||
line-height: #{$lineheight}rem;
|
||||
}
|
||||
|
||||
// If specifying a breakpoint to use (and breakpoint exists).
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
|
||||
|
||||
// If using a number for fontsize.
|
||||
@if $font-value == number {
|
||||
$rootsize: nth($sizes, ($breakpoint + 1));
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
// If using a variable from the scale for fontsize.
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-#{$breakpoint});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, ($breakpoint + 1));
|
||||
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
// If want to use value for all breakpoints.
|
||||
} @else if $breakpoint == all {
|
||||
|
||||
// If using a number for fontsize.
|
||||
@if $font-value == number {
|
||||
$rootsize: nth($sizes, 1);
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$rootsize: nth($sizes, $i);
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
}
|
||||
}
|
||||
|
||||
// If using a variable from the scale for fontsize.
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-0);
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, 1);
|
||||
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
// Loop through breakpoints.
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$get-scale: map-get($modular-scale, scale-#{$i - 1});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, $i);
|
||||
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
}
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$breakpoint} is not valid to use as a breakpoint";
|
||||
}
|
||||
}
|
||||
|
||||
// Set fontsize and baseline at once. Mix of fontsize and baseline mixin.
|
||||
@mixin sassline($fontsize, $font, $lineheight: 2, $below: 2, $breakpoint: 0) {
|
||||
$font-value: type-of($fontsize);
|
||||
$break-value: type-of($breakpoint);
|
||||
$cap-height: map-get($font, cap-height);
|
||||
$in-scale: in-modular-scale(scale-0, $fontsize);
|
||||
|
||||
line-height: #{$lineheight}rem;
|
||||
|
||||
@if $break-value == number and $breakpoint <= ($breakpoints-limit - 1) and $breakpoint >= 0 {
|
||||
|
||||
@if $font-value == number {
|
||||
$rootsize: nth($sizes, ($breakpoint + 1));
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
font-size: #{$fontsize / nth($sizes, ($breakpoint + 1))}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-#{$breakpoint});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, ($breakpoint + 1));
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
font-size: #{$get-size / nth($sizes, ($breakpoint + 1))}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
} @else if $breakpoint == all {
|
||||
|
||||
@if $font-value == number {
|
||||
$rootsize: nth($sizes, 1);
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
font-size: #{$fontsize / nth($sizes, 1)}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$rootsize: nth($sizes, $i);
|
||||
$baseline-shift: #{($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($fontsize / 2 * (($lineheight * $rootsize / $fontsize) - $cap-height)) / $rootsize + 0.00001)};
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
font-size: #{$fontsize / nth($sizes, $i)}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
}
|
||||
}
|
||||
|
||||
} @else if $in-scale == true {
|
||||
$get-scale: map-get($modular-scale, scale-0);
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, 1);
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
font-size: #{$get-size / nth($sizes, 1)}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$get-scale: map-get($modular-scale, scale-#{$i - 1});
|
||||
$get-size: map-get($get-scale, $fontsize);
|
||||
$rootsize: nth($sizes, $i);
|
||||
$baseline-shift: #{($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001};
|
||||
$baseline-push: #{$below - (($get-size / 2 * (($lineheight * $rootsize / $get-size) - $cap-height)) / $rootsize + 0.00001)};
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
font-size: #{$get-size / nth($sizes, $i)}rem;
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-top: #{$baseline-shift}rem;
|
||||
}
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$fontsize} is not a valid scale variable";
|
||||
}
|
||||
|
||||
} @else {
|
||||
@warn "#{$breakpoint} is not valid to use as a breakpoint";
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix.
|
||||
@mixin clearfix {
|
||||
&:before, &:after{
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
&:after{
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
66
_sass/sassline-base/_modular-scale.scss
Executable file
66
_sass/sassline-base/_modular-scale.scss
Executable file
@ -0,0 +1,66 @@
|
||||
// Modular scale
|
||||
// ---------------------------------------
|
||||
|
||||
// Setting responsive modular-scales. Use appropriate scales for viewport sizes.
|
||||
$modular-scale: (
|
||||
// Major Third http://www.modularscale.com/?16,28&px&1.25&web&text
|
||||
scale-0: (
|
||||
alpha: 28.0,
|
||||
beta: 25.0,
|
||||
gamma: 22.4,
|
||||
delta: 20.0,
|
||||
epsilon: 17.9,
|
||||
zeta: 16.0,
|
||||
eta: 14.3,
|
||||
theta: 12.8,
|
||||
iota: 11.5
|
||||
),
|
||||
// Major Third http://www.modularscale.com/?17,30&px&1.25&web&text
|
||||
scale-1: (
|
||||
alpha: 30.0,
|
||||
beta: 26.6,
|
||||
gamma: 24.0,
|
||||
delta: 21.3,
|
||||
epsilon: 19.2,
|
||||
zeta: 17.0,
|
||||
eta: 15.3,
|
||||
theta: 13.6,
|
||||
iota: 12.8
|
||||
),
|
||||
// Major Third http://www.modularscale.com/?18,32&px&1.25&web&text
|
||||
scale-2: (
|
||||
alpha: 32.0,
|
||||
beta: 28.1,
|
||||
gamma: 25.6,
|
||||
delta: 22.5,
|
||||
epsilon: 20.5,
|
||||
zeta: 18.0,
|
||||
eta: 16.3,
|
||||
theta: 14.4,
|
||||
iota: 13.1
|
||||
),
|
||||
// Perfect Fourth http://www.modularscale.com/?20,40&px&1.333&web&text
|
||||
scale-3: (
|
||||
alpha: 40.0,
|
||||
beta: 35.5,
|
||||
gamma: 30.0,
|
||||
delta: 26.7,
|
||||
epsilon: 22.5,
|
||||
zeta: 20.0,
|
||||
eta: 16.9,
|
||||
theta: 15.0,
|
||||
iota: 12.7
|
||||
),
|
||||
// Aug. Fourth http://www.modularscale.com/?22,50&px&1.414&web&text
|
||||
scale-4: (
|
||||
alpha: 50.0,
|
||||
beta: 43.9,
|
||||
gamma: 35.3,
|
||||
delta: 31.1,
|
||||
epsilon: 25.0,
|
||||
zeta: 22.0,
|
||||
eta: 17.6,
|
||||
theta: 15.6,
|
||||
iota: 12.5
|
||||
)
|
||||
);
|
||||
13
_sass/sassline-base/_reset.scss
Executable file
13
_sass/sassline-base/_reset.scss
Executable file
@ -0,0 +1,13 @@
|
||||
// Reset
|
||||
// ---------------------------------------
|
||||
|
||||
// Reset all the things
|
||||
* { box-sizing: border-box; }
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
|
||||
html, body { height: 100%; }
|
||||
a img { border: none; }
|
||||
blockquote { quotes: none; }
|
||||
blockquote:before, blockquote:after { content: ''; content: none; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
|
||||
363
_sass/sassline-base/_typography.scss
Executable file
363
_sass/sassline-base/_typography.scss
Executable file
@ -0,0 +1,363 @@
|
||||
// Typography
|
||||
// ---------------------------------------
|
||||
|
||||
// Setting root sizes and base styles.
|
||||
html {
|
||||
@include rootsize;
|
||||
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
// Site-wide base styles.
|
||||
body {
|
||||
@include fontsize(zeta, all);
|
||||
|
||||
font-family: unquote(map-get($bodytype, font-family));
|
||||
font-style: normal;
|
||||
font-weight: map-get($bodytype, regular);
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
// Links.
|
||||
a {
|
||||
color: $linkColour;
|
||||
text-decoration: none;
|
||||
transition: color .1s, background-color .1s;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $hoverColour;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for typeset text.
|
||||
.typeset {
|
||||
|
||||
// Nice underlines for text links.
|
||||
p a, li a {
|
||||
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($linkColour,20%) 50%);
|
||||
background-position: 0 93%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 100% 0.15rem;
|
||||
text-shadow: 0.1rem 0 $backgroundColour,
|
||||
0.15rem 0 $backgroundColour,
|
||||
-0.1rem 0 $backgroundColour,
|
||||
-0.15rem 0 $backgroundColour;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,lighten($hoverColour,20%) 50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
|
||||
p {
|
||||
@include baseline($fontsize: zeta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: all);
|
||||
|
||||
font-feature-settings: 'kern', 'onum', 'liga';
|
||||
}
|
||||
|
||||
// Headings. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $headingColour;
|
||||
font-family: unquote(map-get($headingtype, font-family));
|
||||
font-feature-settings: 'dlig', 'liga', 'lnum', 'kern';
|
||||
font-style: normal;
|
||||
font-weight: map-get($headingtype, bold);
|
||||
}
|
||||
|
||||
// Heading level 1.
|
||||
h1, .alpha {
|
||||
@include sassline($fontsize: alpha, $font: $headingtype, $lineheight: 3, $below: 1, $breakpoint: all);
|
||||
}
|
||||
|
||||
// Heading level 2.
|
||||
h2, .beta {
|
||||
@include sassline(beta, $headingtype, 3, 1, all);
|
||||
}
|
||||
|
||||
// Heading level 3.
|
||||
h3, .gamma {
|
||||
@include sassline(gamma, $headingtype, 3, 1, all);
|
||||
}
|
||||
|
||||
// Heading level 4.
|
||||
h4, .delta {
|
||||
@include sassline(delta, $headingtype, 2, 0, all);
|
||||
}
|
||||
|
||||
// Heading level 5.
|
||||
h5, .epsilon {
|
||||
@include sassline(epsilon, $headingtype, 2, 0, all);
|
||||
}
|
||||
|
||||
// Heading level 6.
|
||||
h6, .zeta {
|
||||
@include sassline(zeta, $headingtype, 2, 0, all);
|
||||
}
|
||||
|
||||
// Lists.
|
||||
ul, ol {
|
||||
@include baseline(zeta, $bodytype, 2, 2, all);
|
||||
|
||||
li {
|
||||
font-feature-settings: 'kern', 'onum', 'liga';
|
||||
margin-left: 2rem;
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ordered lists.
|
||||
ol {
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
counter-increment: top-level;
|
||||
|
||||
&:before {
|
||||
content: counter(top-level) '.';
|
||||
font-feature-settings: 'lnum', 'tnum';
|
||||
margin-left: -3rem;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
ol {
|
||||
|
||||
li {
|
||||
counter-increment: alt-level;
|
||||
|
||||
&:before {
|
||||
content: counter(alt-level) '.';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
|
||||
li {
|
||||
counter-increment: sub-level;
|
||||
|
||||
&:before {
|
||||
content: counter(top-level) '.' counter(sub-level);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
li {
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
|
||||
li {
|
||||
counter-increment: sub-sub-level;
|
||||
|
||||
&:before {
|
||||
content: counter(top-level) '.' counter(sub-level) '.' counter(sub-sub-level);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Definition lists.
|
||||
dl {
|
||||
@include baseline(zeta, $bodytype, 2, 2, all);
|
||||
|
||||
dt, dd {
|
||||
font-feature-settings: 'kern', 'onum', 'liga';
|
||||
margin-left: 2rem;
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: map-get($bodytype, bold);
|
||||
}
|
||||
|
||||
dd + dt {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables.
|
||||
table {
|
||||
@include sassline(eta, $headingtype, 2, 0, all);
|
||||
|
||||
font-family: unquote(map-get($headingtype, font-family));
|
||||
font-feature-settings: 'liga', 'lnum', 'tnum', 'kern';
|
||||
font-style: normal;
|
||||
font-weight: map-get($headingtype, regular);
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
|
||||
th {
|
||||
@include sassline(zeta, $headingtype, 2, 0, all);
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bold.
|
||||
b, strong, .bold {
|
||||
font-weight: map-get($bodytype, bold);
|
||||
}
|
||||
|
||||
// Italic.
|
||||
em, i, .italic {
|
||||
font-style: map-get($bodytype, italic);
|
||||
}
|
||||
|
||||
// Caption and inline small text.
|
||||
small, .caption {
|
||||
@include fontsize(theta, all);
|
||||
|
||||
font-family: unquote(map-get($headingtype, font-family));
|
||||
font-style: normal;
|
||||
font-weight: map-get($headingtype, regular);
|
||||
}
|
||||
|
||||
small {
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.caption {
|
||||
@include baseline(theta, $headingtype, 2, 2, all);
|
||||
|
||||
color: $captionColour;
|
||||
}
|
||||
|
||||
// Nice spacing for captions.
|
||||
h1 + .caption, .alpha + .caption, h2 + .caption, .beta + .caption, h3 + .caption, .gamma + .caption {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.delta + .caption, .epsilon + .caption, .zeta + .caption {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
// Quotes.
|
||||
blockquote {
|
||||
|
||||
p {
|
||||
border-left: 0.15rem solid $linkColour;
|
||||
font-style: map-get($bodytype, italic);
|
||||
padding-left: 1rem;
|
||||
|
||||
// Add spacing below blockquote paragraphs to align to baseline grid.
|
||||
$get-scale: map-get($modular-scale, scale-0);
|
||||
$get-size: map-get($get-scale, zeta);
|
||||
$rootsize: nth($sizes, 1);
|
||||
$baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
|
||||
$baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
|
||||
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-bottom: #{$baseline-shift}rem;
|
||||
|
||||
@for $i from 2 through $breakpoints-limit {
|
||||
$get-scale: map-get($modular-scale, scale-#{$i - 1});
|
||||
$get-size: map-get($get-scale, zeta);
|
||||
$rootsize: nth($sizes, $i);
|
||||
$baseline-shift: #{($get-size / 2 * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001};
|
||||
$baseline-push: #{3 - (($get-size * ((2 * $rootsize / $get-size) - map-get($bodytype, cap-height))) / $rootsize + 0.00001)};
|
||||
|
||||
@media screen and (min-width: nth($points, $i) / 16 * 1em ) {
|
||||
margin-bottom: #{$baseline-push}rem;
|
||||
padding-bottom: #{$baseline-shift}rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(break-1) {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal rule.
|
||||
hr {
|
||||
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$captionColour 50%);
|
||||
background-position: 0 50%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 100% 0.15rem;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding-bottom: 3rem;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
// Code block.
|
||||
code, pre {
|
||||
background-color: $codeBackgroundColour;
|
||||
font-family: unquote(map-get($monospacetype, font-family));
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
@include fontsize(theta, all);
|
||||
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
// Letter space those capitals people, Jan Tschichold would be proud.
|
||||
.upper {
|
||||
font-kerning: normal;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Real small caps.
|
||||
.small-caps {
|
||||
font-feature-settings: 'smcp', 'kern';
|
||||
font-kerning: normal;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
// Consistent height numbers with OpenType.
|
||||
.lining-numerals {
|
||||
font-feature-settings: 'lnum', 'kern';
|
||||
}
|
||||
|
||||
// Ascending and descending numbers with OpenType.
|
||||
.oldstyle-numerals {
|
||||
font-feature-settings: 'onum', 'kern';
|
||||
}
|
||||
}
|
||||
96
_sass/sassline-base/_variables.scss
Executable file
96
_sass/sassline-base/_variables.scss
Executable file
@ -0,0 +1,96 @@
|
||||
// SCSS variables
|
||||
// ---------------------------------------
|
||||
|
||||
// Note: For the following Sass maps enter values as if they would be px units.
|
||||
|
||||
// Breakpoint sizes from px to ems. Add more values here to add more breakpoints.
|
||||
// Change names if you prefer, it wont break the mixin as long as they are strings not just numbers.
|
||||
$breakpoints: (
|
||||
break-0: 0, // 0px Mobile first
|
||||
break-1: 640, // 640px ~ Small tablet up
|
||||
break-2: 800, // 800px ~ Large tablet up
|
||||
break-3: 1024, // 1024px ~ Desktop up
|
||||
break-4: 1600 // 1600px ~ Large desktop up
|
||||
) !default;
|
||||
|
||||
// Root font-sizes for each breakpoint. Set to half desired line-height of body text.
|
||||
// ! Make sure to have as many sizes as breakpoints above.
|
||||
$rootsizes: (
|
||||
rootsize-0: 12, // 24px line-height body text
|
||||
rootsize-1: 14, // 28px line-height body text
|
||||
rootsize-2: 15, // 30px line-height body text
|
||||
rootsize-3: 17, // 34px line-height body text
|
||||
rootsize-4: 19 // 38px line-height body text
|
||||
) !default;
|
||||
|
||||
// Set the optimum line-length for your text (based on typeface).
|
||||
// Aim for 75–100 characters a line when possible, at smaller sizes type size is more important.
|
||||
// ! Make sure to have as many widths as breakpoints above.
|
||||
// Note: this was 'maxwidths' in previous versions.
|
||||
$measures: (
|
||||
measure-0: 500, // 500px wide
|
||||
measure-1: 550, // 550px wide
|
||||
measure-2: 600, // 600px wide
|
||||
measure-3: 680, // 680px wide
|
||||
measure-4: 750 // 750px wide
|
||||
) !default;
|
||||
|
||||
// Set the max-widths for containers (based on design).
|
||||
// ! Make sure to have as many widths as breakpoints above.
|
||||
$maxwidths: (
|
||||
width-0: 500, // 500px wide
|
||||
width-1: 600, // 600px wide
|
||||
width-2: 800, // 800px wide
|
||||
width-3: 1100, // 110px wide
|
||||
width-4: 1300 // 1300px wide
|
||||
) !default;
|
||||
|
||||
// Gutter widths
|
||||
$gutterwidths: (
|
||||
small: 1rem,
|
||||
medium: 2rem,
|
||||
large: 4rem
|
||||
) !default;
|
||||
|
||||
// Add typefaces here.
|
||||
// Add weight and style details too.
|
||||
// ! Set cap height to set to the baseline.
|
||||
$bodytype: (
|
||||
font-family: '"Alegreya Sans", sans-serif',
|
||||
regular: 400,
|
||||
bold: 700,
|
||||
italic: italic,
|
||||
cap-height: 0.66
|
||||
) !default;
|
||||
|
||||
$headingtype: (
|
||||
font-family: '"Neuton", serif',
|
||||
regular: 400,
|
||||
bold: 700,
|
||||
cap-height: 0.66
|
||||
) !default;
|
||||
|
||||
$monospacetype: (
|
||||
font-family: 'Menlo, monospace',
|
||||
regular: 400,
|
||||
cap-height: 0.68
|
||||
) !default;
|
||||
|
||||
// Here are some local fonts cap-height sizes to get you started:
|
||||
// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
|
||||
// Lucida Grande: 0.72, Helvetica: 0.66, Verdana: 0.76, Tahoma: 0.76
|
||||
|
||||
// Selection of Typekit fonts cap-height sizes:
|
||||
// Proxima Nova: 0.57, Museo Slab: 0.66, JAF Facit: 0.7, Brandon Grotesque: 0.65, Clavo: 0.7, Adelle: 0.66, FF Tisa Pro: 0.82, Jubilat: 0.66, Futura PT: 0.66, Chaparral Pro: 0.5, Minion Pro: 0.66, Myriad Pro: 0.66, Adobe Caslon Pro: 0.36
|
||||
|
||||
// Text colours. British English.
|
||||
$headingColour: darken(#46412A, 5%) !default;
|
||||
$bodyColour: #46412A !default;
|
||||
$linkColour: #5B5BFF !default;
|
||||
$hoverColour: darken(#5B5BFF, 10%) !default;
|
||||
$captionColour: #46412A !default;
|
||||
$white: #FFFFFF !default;
|
||||
|
||||
// Background colours.
|
||||
$backgroundColour: #ffefc8 !default;
|
||||
$codeBackgroundColour: darken(#ffefc8, 5%) !default;
|
||||
1
_sass/sassline.scss
Normal file
1
_sass/sassline.scss
Normal file
File diff suppressed because one or more lines are too long
12
_sass/style.scss
Executable file
12
_sass/style.scss
Executable file
@ -0,0 +1,12 @@
|
||||
/* CSS compiled from SCSS. */
|
||||
/* --------------------------------------- */
|
||||
|
||||
// Import Sassline base.
|
||||
@import "sassline-base";
|
||||
|
||||
// Import your project SCSS module partials.
|
||||
@import "modules/globals";
|
||||
@import "modules/nav";
|
||||
@import "modules/header";
|
||||
@import "modules/footer";
|
||||
@import "modules/show-grid";
|
||||
100
_sass/theme.scss
100
_sass/theme.scss
@ -1,30 +1,84 @@
|
||||
// Imports
|
||||
@import "bourbon/bourbon";
|
||||
@import "neat/neat";
|
||||
@import "base/base";
|
||||
|
||||
// Theme variables
|
||||
$color--background: #ffefc8;
|
||||
$color--foreground: #150301;
|
||||
$color--accent: #5277c3;
|
||||
|
||||
// Theme typography
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
@import "sassline-base";
|
||||
|
||||
// Layout
|
||||
body {
|
||||
color: $color--foreground;
|
||||
background: $color--background;
|
||||
margin: 0;
|
||||
background: $backgroundColour;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color--accent;
|
||||
}
|
||||
|
||||
// Theme layout
|
||||
.container {
|
||||
@include outer-container;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.header {
|
||||
background: darken($backgroundColour, 10%);
|
||||
border-bottom: 1px solid darken($backgroundColour, 15%);
|
||||
.button {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Logo
|
||||
.logo {
|
||||
padding: 10px 10px 10px 0;
|
||||
.image {
|
||||
max-width: 52px;
|
||||
height: auto;
|
||||
border-radius: 100%;
|
||||
}
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
.nav {
|
||||
text-align: right;
|
||||
.item {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Main
|
||||
.main {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
// Article
|
||||
.article {
|
||||
.small {
|
||||
color: lighten($bodyColour, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
// Posts
|
||||
.posts {
|
||||
list-style: none;
|
||||
.post {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.paginator {
|
||||
text-align: center;
|
||||
.pagination {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid darken($backgroundColour, 10%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user