Import the pebble dev site into devsite/

This commit is contained in:
Katharine Berry 2025-02-17 17:02:33 -08:00
parent 3b92768480
commit 527858cf4c
1359 changed files with 265431 additions and 0 deletions

21
third_party/responsive/LICENSE vendored Normal file
View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2013 James South
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

3014
third_party/responsive/js/responsive.js vendored Executable file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,52 @@
.alert {
@extend .clearfix;
position: relative;
margin: 1em 0;
padding: 0 1em;
background-color: $alert-color-scheme;
border: 1px solid darken($alert-color-scheme, 20);
color: darken($alert-color-scheme, 70);
.close {
position: relative;
right: -1.73em;
top: .13em;
float: right;
color: inherit;
font-size: 1.17em;
font-weight: bold;
line-height: 1em;
[dir="rtl"] & {
float: left;
right: auto;
left: -1.73em;
}
&,
&:active,
&:focus,
&:hover {
background-color: transparent;
border: none;
}
&:hover {
text-decoration: underline;
}
}
}
.alert-dismissable {
padding-right: 2.17em;
[dir="rtl"] & {
padding-right: 1em;
padding-left: 2.17em;
}
}
.alert-heading {
color: inherit;
}

View file

@ -0,0 +1,19 @@
.autosize,
[data-autosize] {
overflow: hidden;
transition: height .3s linear;
}
.autosize-clone {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
overflow: hidden;
transition: none;
[dir="rtl"] & {
left: auto;
right: -99999px;
}
}

View file

@ -0,0 +1,90 @@
/**
* 1. Use the iOS devices hardware accelerator to provide native scrolling.
*/
html {
-webkit-overflow-scrolling: touch; /* 1 */
color: $base-text-color;
font-size: $base-font-size;
line-height: $base-line-height;
box-sizing: border-box;
}
/**
* Fix the box model
* Overwrite Normalize rather than edit it.
*/
*, :before, :after,
hr, input[type=search] {
box-sizing: inherit;
}
// Add a placeholder for focus events so we can manage
// both global and button styles.
%focus {
outline: $selection-focus;
outline-offset: $selection-focus-offset;
}
/**
* Set a focus on elements that can recieve it.
* http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
*/
a, area, button, input, object, select, textarea, [tabindex] {
&:focus {
@extend %focus;
}
}
/**
* Suppress the focus outline on links that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
*/
[tabindex="-1"]:focus {
outline: none !important;
}
/**
* Headers
* 1: Improve rendering of screen fonts.
* 2: Prevent page breaking.
*/
h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility; /* 1 */
page-break-after: avoid; /*2 */
}
/**
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background colour to match your design.
*/
::-moz-selection {
background: $selection-background;
text-shadow: none;
}
::selection {
background: $selection-background;
text-shadow: none;
}
/**
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid $horizontal-rule-color;
margin: 1em 0;
padding: 0;
}
/**
* Add query indicator to abbr
*/
abbr {
cursor: help;
}

View file

@ -0,0 +1,92 @@
/**
* Normalize button borders, color, and padding.
* 1: Remove rounded corners on iPhone.
* 2: Remove 300ms touch delay.
*/
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
-webkit-appearance: none; /* 1 */
border-radius: 0; /* 1 */
color: inherit;
cursor: pointer;
display: inline-block;
padding: .5em 1em;
line-height: normal;
margin-bottom: 0;
background: $button-background;
border: $button-border;
touch-action: manipulation; /*2 */
text-decoration: none;
&:hover {
background-color: darken($button-background, 5);
border: $button-border;
}
&:active {
background-color: lighten($button-background, 5);
outline: none;
}
/**
* Inline buttons designed for rendering next to inputs.
* 1. Fix inline-block margin.
* 2. Pad buttons.
*/
&.btn-inline {
margin-left: -.27em; /* 1 */
padding: .25em 1em; /*2 */
[dir="rtl"] & {
margin-left: auto;
margin-right: -.27em;
}
}
}
/**
* 1. Fix IOS 6/7 opacity issue
*/
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
background-color: lighten($button-background, 5);
color: $button-color-disabled;
cursor: not-allowed;
opacity: 1; /* 1 */
}
/**
* Reset width for inputs
*/
input {
&[type="submit"],
&[type="reset"],
&[type="button"] {
max-width: none;
width: auto;
}
}
/**
* Grouped buttons.
*/
.btn-group {
@extend .clearfix;
display: inline-block;
position: relative;
vertical-align: middle;
white-space: nowrap;
> button,
> input[type="submit"],
> input[type="button"],
> input[type="reset"] {
float: left;
[dir="rtl"] & {
float: right;
}
}
}

View file

@ -0,0 +1,260 @@
/*
* 1: Prevent font shift on chrome.
*/
.carousel {
margin-bottom: 1em;
overflow: hidden;
position: relative;
-webkit-backface-visibility: hidden; /* 1 */
-webkit-perspective: 1000; /* 1 */
&.no-transition > figure {
transition-duration: 0s !important;
}
/*
* Default slide version
*/
> figure {
margin: 0;
display: none;
position: relative;
transition: .7s ease-in-out left;
transform: translate3d(0, 0, 0);
[dir="rtl"] & {
transition: .7s ease-in-out right;
}
&:focus {
&:before {
@extend %focus;
content: "";
position: absolute;
z-index: 1;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
pointer-events: none;
}
}
> img {
display: block;
width: 100%;
}
> figcaption {
position: absolute;
bottom: 0;
width: 100%;
padding: 1px 1em;
background-color: $carousel-caption-background-color;
color: $carousel-caption-color;
}
}
/*
* Indicators
*/
> ol {
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
text-align: center;
top: 1em;
z-index: 3;
li {
background-color: $carousel-nav-background-color;
border: $carousel-nav-border;
cursor: pointer;
display: inline-block;
height: 1em;
margin: 1px;
text-indent: -9999px;
width: 1em;
&:hover {
background-color: $carousel-nav-background-color-hover;
border-color: $carousel-nav-border-color-hover;
}
}
.active {
background-color: $carousel-nav-background-color-active;
border-color: $carousel-nav-border-color-active;
&:hover {
background-color: $carousel-nav-background-color-active;
border-color: $carousel-nav-border-color-active;
}
}
}
/*
* Next Last version
*/
.carousel-active,
.next,
.prev,
.swipe {
display: block;
}
.carousel-active,
.next.left,
.prev.right {
left: 0;
[dir="rtl"] & {
left: auto;
right: 0;
}
}
.carousel-active {
position: relative !important;
z-index: 1;
> figcaption {
position: static;
}
}
.next,
.prev,
.swipe {
position: absolute;
z-index: 0;
top: 0;
width: 100%;
height: 100%;
}
.next,
.carousel-active.right {
left: 100%;
[dir="rtl"] & {
left: auto;
right: 100%;
&.swiping {
right: -100%;
}
}
}
.prev,
.carousel-active.left {
left: -100%;
[dir="rtl"] & {
left: auto;
right: -100%;
&.swiping {
right: 100%;
}
}
}
}
.carousel-control {
position: absolute;
left: 1px;
top: 40%;
z-index: 3;
display: block;
width: 2em;
margin-top: -1em;
padding: .5em;
font-size: 2em;
font-weight: bold;
text-align: center;
[dir="rtl"] & {
left: auto;
right: 1px;
}
&.forward {
left: auto;
right: 1px;
[dir="rtl"] & {
right: auto;
left: 1px;
}
}
&,
&:active,
&:visited,
&:hover,
&:focus {
background-color: transparent;
border: none;
color: $carousel-control-color;
text-decoration: none;
}
&:hover {
text-decoration: underline;
}
}
/*
* Fade version
*/
.carousel-fade {
> figure {
position: absolute;
top: 0;
right: 0 !important;
bottom: 0;
left: 0 !important;
width: 100%;
height: 100%;
opacity: 0;
&,
[dir="rtl"] & {
transition: opacity .7s ease-in-out;
}
}
> figure.swipe,
> figure.next,
> figure.prev {
z-index: 1;
opacity: 1;
}
> .carousel-active.swipe {
z-index: 2;
}
> .carousel-active {
position: relative;
}
.carousel-active {
opacity: 1;
&.left,
&.right {
z-index: 2;
opacity: 0;
}
}
.carousel-control {
&,
&:visited {
z-index: 3;
}
}
}

View file

@ -0,0 +1,60 @@
/*
* Colors and padding.
*/
pre,
code,
samp,
kbd {
padding: .5em;
background-color: $code-background-color;
border: 1px solid $code-border-color;
color: $code-color;
}
code > kbd {
background-color: darken($code-background-color, 5);
}
/*
* Prevent overlap on concurrent lines.
*/
code,
samp,
kbd {
padding: .0667em .25em;
}
/*
* Prevent wrapping.
*/
kbd {
white-space: nowrap;
}
/*
* Reassert no wrapping.
*/
pre {
overflow-x: auto;
/*
* Remove borders etc in pre.
*/
code,
samp {
padding: 0;
border: none;
}
code {
word-wrap: normal;
white-space: pre;
}
}
/*
* Fixed height with overflow.
*/
.pre-scrollable {
max-height: 20em;
overflow-y: scroll;
}

View file

@ -0,0 +1,9 @@
/** ==|== Responsive =============================================================
Author: James South
twitter : http://twitter.com/James_M_South
github : https://github.com/ResponsiveBP/Responsive
Copyright (c), James South.
Licensed under the MIT License.
============================================================================== */
/*! Responsive v3.0.0 | MIT License | responsivebp.com */

View file

@ -0,0 +1,42 @@
.accordion {
border: solid 1px $accordion-border-color;
margin-bottom: .125em;
}
.accordion-head {
border-bottom: solid 1px $accordion-border-color;
display: block;
a {
display: block;
padding: .5em;
}
}
.accordion-body {
padding: 0 .5em;
&.collapse { margin-top: -1px; }
}
.trans,
.collapse { transition: height .5s ease, width .5s ease; }
.expand,
.collapse {
display: block;
height: auto;
margin-top: 0;
overflow: hidden;
position: relative;
width: auto;
}
.collapse {
height: 0;
&.width {
height: auto;
width: 0;
}
}

View file

@ -0,0 +1,285 @@
/**
* Normalize
*/
.form {
margin: 1em 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
legend {
display: block;
width: 100%;
margin-bottom: 1em;
}
label {
&,
.input-group {
display: block;
margin-bottom: 1em;
}
&[for] {
cursor: pointer;
}
> input,
> input[type="checkbox"],
> input[type="radio"],
> select {
display: inline-block;
margin: 0 1em 0 0;
vertical-align: text-top;
}
}
select,
textarea,
input,
.no-edit {
background: $form-input-background;
border: $form-input-border;
border-radius: $form-input-border-radius;
color: $form-input-color;
display: block;
font-family: inherit;
margin-bottom: 1em;
padding: .25em;
width: 100%;
/*
* Disabled
* 1. Override the value set in normalize.css
* 2. Fix IOS 6/7 opacity issue
*/
&[disabled] {
background: $form-input-background-disabled;
border-color: $form-input-border-color-disabled;
color: $form-input-color-disabled;
cursor: not-allowed !important; /* 1 */
opacity: 1;
}
}
/*
* Clean up that hideous file input.
*/
input[type="file"]::-ms-value {
background: $form-input-background;
border: none;
}
input[type="file"]::-ms-browse {
background: $button-background;
border: $button-border;
color: $form-input-color;
&:active {
background-color: lighten($button-background, 5);
}
}
input[type="color"] {
max-width: 105px;
}
/*
* Declared separately to reduce selector duplication
* for padding
*/
input[type="radio"],
input[type="checkbox"] {
display: block;
line-height: inherit;
margin: .1875em .1875em .1875em 0;
min-height: 1em;
min-width: 1em;
padding: 0;
width: auto;
}
input[type="radio"] {
border-color: transparent \9;
border-radius: 1em;
}
/*
* Add range styles for IE8 and IE9
*/
input[type="range"] {
background-color: #fff \9;
border: 1px solid #c0c0c0 \9;
border: 1px solid transparent;
padding: .25em 0;
padding: .25em \9;
}
/*
* Inline
*/
input.inline-block,
select.inline-block {
width: auto;
}
/*
* 1. Remove borders and padding on range controls in IE10+
*/
x::-ms-reveal,
input[type="range"] { /* 1 */
border: 1px solid transparent;
padding: .25em 0;
}
/*
* Fix field styling on iPhone and iPad.
* 1. Strip OS styling on IOS
*/
select,
textarea,
input[type="text"],
input[type="search"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="week"],
input[type="month"],
input[type="time"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="color"] {
-webkit-appearance: none; /* 1 */
}
select option {
height: 100%;
}
/*
* Textareas : Multiple resizable options.
* 1: Horizontal
* 2: Vertical
* 3: None
*/
textarea {
height: auto;
min-height: 5.25em;
resize: both;
&.horizontal {
resize: horizontal; /* 1 */
}
&.vertical {
resize: vertical; /*2 */
}
&.no-resize {
resize: none; /* 3 */
}
}
/*
* Read only
*/
.no-edit,
[readonly] {
background-color: $form-input-background-readonly;
border-color: $form-input-border-color-readonly;
color: $form-input-color-readonly;
cursor: not-allowed;
}
/*
* Placeholder : These have to be kept separate
* 1. Safari and Chrome
* 2. Firefox 4-18
* 3. Firefox 19+
* 4. IE10+
*/
::-webkit-input-placeholder {
color: $form-placeholder; /* 1 */
}
:-moz-placeholder {
color: $form-placeholder; /*2 */
}
::-moz-placeholder {
color: $form-placeholder; /* 3 */
}
:-ms-input-placeholder {
color: $form-placeholder; /* 4 */
}
/*
* Actions - Contains buttons
*/
.form-actions {
margin: 1em 0;
padding: 1em 0;
}
@-moz-document url-prefix() {
/*
* Remove excess padding in Firefox
*/
input[type="color"] {
min-height: 1.8em;
padding: 0;
}
}
@media (-webkit-min-device-pixel-ratio:0) {
/*
* Fix changing height issues on iOS7.
*/
input[type="datetime-local"],
input[type="date"],
input[type="week"],
input[type="month"],
input[type="time"],
input[type="number"] {
min-height: 2em;
}
/*
* Remove excess padding in Webkit
*/
input[type="color"] {
min-height: 1.8em;
padding: 0;
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border: none;
}
}
/*
* Fix field styling on iPhone and iPad.
* 1. Add a select indicator
*/
select {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMzEiIGhlaWdodD0iMTAuNSI+PHBvbHlnb24gZmlsbD0iIzIyMiIgcG9pbnRzPSIxMSwwIDUuNSw5IDAsMCIvPjwvc3ZnPg==); /* 1 */
background-repeat: no-repeat;
background-position: right center;
padding-right: 1.67em;
[dir="rtl"] & {
background-position: .67em center;
padding-right: 0;
padding-left: 1.67em;
}
}
}

View file

@ -0,0 +1,84 @@
/**Manages width in a single place */
.container {
margin: 0 auto;
max-width: $grid-container-max-width;
width: $grid-container-width;
&.fixed,
.fixed & {
width: $grid-container-max-width;
}
}
.container--full {
width: 100%;
height: 100%;
&.fixed,
.fixed & {
width: $grid-container-max-width;
}
}
.row {
@extend .clearfix;
}
/**Columns */
[class*=col-] {
display: block;
width: 100%;
float: left;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
&[class*=offset],
&[class*=push],
&[class*=pull] {
position: relative;
}
}
.no-gutter.pad-gutter > [class*=col-] {
padding: 0 $grid-column-gutter/2;
}
/*
* Extra small
*/
@include grid-base(xs);
@include grid-columns(xs);
/*
* Small
*/
@include bp-min(s) {
@include grid-base(s);
@include grid-columns(s);
}
/*
* Medium
*/
@include bp-min(m) {
@include grid-base(m);
@include grid-columns(m);
}
/*
* Large
*/
@include bp-min(l) {
@include grid-base(l);
@include grid-columns(l);
}

View file

@ -0,0 +1,106 @@
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix {
&:before,
&:after {
content: ""; /* 1 */
display: table; /*2 */
}
&:after {
clear: both;
}
}
/*
* Float helpers
*/
.push {
float: right !important;
[dir="rtl"] & {
float: left !important;
}
}
.pull {
float: left !important;
[dir="rtl"] & {
float: right !important;
}
}
// XS, S, M, L viewports.
@include push-pull(xs);
@include push-pull(s);
@include push-pull(m);
@include push-pull(l);
/*
* Layout helpers
*/
.block {
display: block !important;
}
.inline-block {
display: inline-block !important;
}
.inline {
display: inline !important;
}
// XS, S, M, L viewports.
@include layout(xs);
@include layout(s);
@include layout(m);
@include layout(l);
/*
* Text align helpers
*/
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
// XS, S, M, L viewports.
@include text-align(xs);
@include text-align(s);
@include text-align(m);
@include text-align(l);
// Grid state detection.
.grid-state-indicator {
position: absolute;
top: -99999px;
left: -99999px;
height: 1px;
width: 0;
[dir="rtl"] & {
left: auto;
right: -99999px;
}
}
// Breakpoint driven changes
@include grid-state(s, 1px);
@include grid-state(m, 2px);
@include grid-state(l, 3px);

View file

@ -0,0 +1,93 @@
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
&:before {
content: "";
display: block;
height: 150%;
width: 0;
}
}
/*
* Hide from both screen readers and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screen readers: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
&.focusable {
&:active, &:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Fade opacity with animation
*/
.fade-out {
opacity: 0 !important;
}
/*
* Opacity helper to add to elements to allow fade animation
*/
.fade-out,
.fade-in {
transition: opacity .3s;
}
.fade-in {
opacity: 1 !important;
}
/*
* Responsive helpers to toggle visibility.
*/
.visible-xs,
.visible-s,
.visible-m,
.visible-l {
display: none !important;
}
// XS, S, M, L viewports.
@include visibility(xs);
@include visibility(s);
@include visibility(m);
@include visibility(l);

View file

@ -0,0 +1,137 @@
/*
* Unordered and ordered lists
* Scale the padding/margin with the base font.
*/
ul,
ol {
margin: 1em 0;
padding-left: 2.5em;
[dir="rtl"] & {
padding-left: 0;
padding-right: 2.5em;
}
}
ul ul,
ol ol {
margin: 0;
}
/*
* No bullets on first level.
*/
ul.no-bullets,
ol.no-bullets {
padding-left: 0;
[dir="rtl"] & {
padding-right: 0;
}
& > li {
list-style: none;
}
}
/*
* Coloured lists.
*/
ul.colored,
ol.colored {
padding-left: 40px;
& > li {
list-style-type: none;
position: relative;
/*
* 1. Normalize funky webkit margin
* 2. Escaped unicode coloured circle.
* 3. Edit this property to change all colored class lists.
*/
&:before {
position: absolute;
top: 0;
left: -1em;
-webkit-margin-start: -.25em; /* 1 */
content: "\25cf"; /*2 */
color: $list-colored-bullet; /* 3 */
font-size: 1em;
font-weight: bold;
text-align: right;
text-decoration: none;
[dir="rtl"] & {
left: auto;
right: -1em;
text-align: left;
}
}
}
}
/*
* Counter increment to replace standard numbers.
*/
ol.colored {
counter-reset: foo;
> li {
counter-increment: foo;
/*
* Use the :before pseudo element to supply numbers.
* 1. The counter value.
* 2. Normalize funky webkit margin
*/
&:before {
content: counter(foo) "."; /* 1 */
font-weight: normal;
left: -3.125em;
width: 2.5em;
-webkit-margin-start: 0; /*2 */
[dir="rtl"] & {
left: auto;
right: -3.125em;
}
}
}
}
/**Definition lists
* Prevent dt and dd collapse.
*/
dt, dd {
min-height: 1.4em;
}
@include bp-min(s) {
/*
* Horizontally styled definition list
*/
.dl-horizontal {
& > dt {
clear: left;
float: left;
width: 9.375em;
white-space: nowrap;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
[dir="rtl"] & {
clear: right;
float: right;
text-align: left;
}
}
& > dd {
margin-left: 10.375em;
[dir="rtl"] & {
margin-left: auto;
margin-right: 10.375em;
}
}
}
}

View file

@ -0,0 +1,117 @@
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Make the image responsive.
* 1: Fix svg aspect scaling in IE
*/
img {
max-width: 100%;
height: auto;
&[src*=".svg"] {
width: 100% \9; /* 1 */
}
}
x::-ms-reveal,
img[src*=".svg"] {
width: 100%; /* 1 */
}
/*
* Remove the border around images in anchors.
*/
a img {
border: none;
}
/*
* Properly scale your video on any device based on common ratios.
* The code here is based on research and work by Theirry Koblentz, Anders Andersen,
* Niklaus Gerber, and Jeff Hobbs.
*/
.media {
height: 0;
height: auto;
margin-bottom: 1em;
max-width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
&.widescreen {
padding-bottom: 45%;
}
&.vimeo {
padding-top: 0;
}
&.instagram {
height: auto;
max-width: none;
padding-bottom: 120%;
}
&.vine {
height: auto;
max-width: none;
padding-bottom: 100%;
}
&.getty {
height: auto;
padding-bottom: 79.9663%;
}
&.video {
padding-top: 0;
}
iframe,
object,
embed,
video {
background-color: transparent;
border: 0;
height: 100%;
left: 0;
margin: 0;
outline: none;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
img {
/*
* Position the image absolutely and then move it's four positions
* 1000000% out of the container. This with an auto margin is the core of the trick.
* Why such a large number? Firefox seems to have issue when using larger images even
* at 100%.
*/
bottom: -1000000%;
left: -1000000%;
margin: auto;
position: absolute;
right: -1000000%;
top: -1000000%;
width: 100%;
}
&.media-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,425 @@
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /*2 */
-webkit-text-size-adjust: 100%; /*2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/**HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /*2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/**Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/**Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/**Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/**Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /*2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /*2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /*2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /*2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /*2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/**Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

View file

@ -0,0 +1,67 @@
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
background: transparent !important;
color: #000 !important; /**Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /**h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}

View file

@ -0,0 +1,89 @@
@include bp(xs) {
/*
* Force the columns to display as rows on small viewports.
* Headers are applied with data attributes.
*/
[data-table-list] {
opacity: 0;
}
.table-list {
display: block;
thead,
tfoot,
th {
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
visibility: hidden;
}
tbody,
tr,
td,
th[scope=row] {
position: static;
display: block;
overflow: visible;
visibility: visible;
}
tr {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
td,
th[scope=row] {
float: left;
width: 100%;
[dir="rtl"] & {
float: right;
}
}
td {
&:before,
&:after {
display: block;
padding: .5em 0;
font-weight: bold;
}
&:before {
content: attr(data-thead);
}
}
th[scope=row] {
&:before,
&:after {
display: block;
padding: .5em 0;
font-weight: bold;
}
&:before {
content: attr(data-thead);
}
}
td:after,
th[scope=row]:after {
content: attr(data-tfoot);
}
&.table-bordered {
border-top-style: none;
}
}
}

View file

@ -0,0 +1,64 @@
/*
* Make it responsive
*/
table {
margin: 1em 0;
max-width: 100%;
width: 100%;
th,
td {
padding: .5em;
text-align: left;
vertical-align: top;
[dir="rtl"] & {
text-align: right;
}
}
}
/*
* Bordered tables
*/
.table-bordered {
border: $table-bordered-border;
border-left-width: 0;
border-collapse: separate;
th,
td {
border-top: $table-bordered-border;
border-left: $table-bordered-border;
}
thead:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top-width: 0;
}
}
/*
* Striped tables
*/
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th,
.table-row-alt > td,
.table-row-alt > th {
background-color: $table-striped-background-color;
}
/*
* Overflow helpers
*/
.table-scrollable {
margin: 1em 0;
overflow-y: hidden;
overflow-x: auto;
width: 100%;
table {
margin: 0;
}
}

View file

@ -0,0 +1,63 @@
.tabs {
position: relative;
> ul {
@extend .clearfix;
list-style: none;
border-bottom: 1px solid $tabs-nav-border-color;
margin-top: 0;
padding: 0;
> li {
float: left;
margin-bottom: -1px;
[dir="rtl"] & {
float: right;
}
> a {
display: block;
line-height: 2em;
margin-right: .2em;
padding: 0 1em;
background-color: $tabs-nav-item-background-color;
border: 1px solid $tabs-nav-item-border-color;
color: $tabs-nav-item-color;
text-decoration: none;
cursor: pointer;
[dir="rtl"] & {
margin-right: 0;
margin-left: .2em;
}
&:hover {
background-color: $tabs-nav-item-background-color-hover;
border-color: $tabs-nav-item-border-color-hover;
color: $tabs-nav-item-color-hover;
}
}
&.tab-active > a {
&,
&:hover {
background-color: $tabs-nav-item-background-color-active;
border: 1px solid $tabs-nav-item-border-color-active;
border-bottom-color: transparent;
color: $tabs-nav-item-color-active;
cursor: default;
}
}
}
}
> * {
display: none;
}
> ul,
.tab-pane-active {
display: block;
}
}

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20.031" height="10.5"><polygon fill="#222" points="11,0 5.5,9 0,0"/></svg>

After

Width:  |  Height:  |  Size: 121 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 B

View file

@ -0,0 +1,41 @@
// Utilities
@import "utilities/variables";
@import "utilities/mixins/breakpoints";
@import "utilities/mixins/grid";
@import "utilities/mixins/push-pull";
@import "utilities/mixins/grid-state";
@import "utilities/mixins/layout";
@import "utilities/mixins/text-align";
@import "utilities/mixins/visibility";
// Base Styles
// @import "partials/copyright";
// @import "partials/normalize";
// @import "partials/base";
// Grid System
@import "partials/grid";
// CSS Components
// @import "partials/alerts";
// @import "partials/buttons";
// @import "partials/code";
// @import "partials/forms";
// @import "partials/lists";
// @import "partials/media";
// @import "partials/tables";
// JS Plugins
// @import "partials/autosize";
// @import "partials/carousel";
// @import "partials/dropdown";
@import "partials/modal";
// @import "partials/tablelist";
// @import "partials/tabs";
// Helpers
@import "partials/helpers-layout";
@import "partials/helpers-visibility";
// Print Styles
@import "partials/print";

View file

@ -0,0 +1,124 @@
// General Styles
$base-font-size: 100% !default;
$base-line-height: 1.4 !default;
$base-text-color: #222 !default;
// Selected text
$selection-background: #b3d4fc !default;
// Focused objects
$selection-focus: 2px solid #4d90fe;
$selection-focus-offset: -1px !default;
//==
// Grid System
//##
$grid-container-max-width: 1140px !default;
$grid-container-width: 95% !default;
$grid-column-gutter: 2% !default;
$grid-column-count: 12!default;
// Breakpoints. These have been carefully considered so it
// is recommended to leave them as they are.
$grid-breakpoint-xs-max: 47.99em !default;
$grid-breakpoint-s-min: 48em !default;
$grid-breakpoint-s-max: 61.99em !default;
$grid-breakpoint-m-min: 62em !default;
$grid-breakpoint-m-max: 74.99em !default;
$grid-breakpoint-l-min: 75em !default;
//==
// Basic Elements
//##
// Horizontal Rule
$horizontal-rule-color: #c0c0c0 !default;
// Tables
$table-bordered-border: 1px solid #c0c0c0 !default;
$table-striped-background-color: #ebebeb !default;
//==
// CSS Components
//##
// Forms
$form-placeholder: #c0c0c0 !default;
$form-input-background: #fff !default;
$form-input-border: 1px solid #c0c0c0 !default;
$form-input-border-radius: 0 !default;
$form-input-color: #222 !default;
$form-input-background-disabled: #ebebeb !default;
$form-input-border-color-disabled: #c0c0c0 !default;
$form-input-color-disabled: #c0c0c0 !default;
$form-input-background-readonly: null !default;
$form-input-border-color-readonly: #ebebeb !default;
$form-input-color-readonly: null !default;
// Buttons
$button-background: #dadada !default;
$button-border: solid 1px #c0c0c0 !default;
$button-color-disabled: #5d5d5d !default;
// Lists
$list-colored-bullet: #00a9ec !default;
// Alerts
$alert-color-scheme: #fcf8e3 !default;
// Code
$code-background-color: #f7f7f9 !default;
$code-border-color: #c0c0c0 !default;
$code-color: #ad0d36 !default;
//==
// JS Plugins
//##
// Modal
$modal-header-background: transparent !default;
$modal-header-color: #fff !default;
$modal-footer-background: transparent !default;
$modal-footer-color: #fff !default;
$modal-content-background-color: #fff !default;
$modal-media-background-color: #222 !default;
$modal-control-color: #fff !default;
// Carousel
$carousel-caption-background-color: #222 !default;
$carousel-caption-color: #fff !default;
$carousel-control-color: #fff !default;
$carousel-nav-background-color: transparent !default;
$carousel-nav-border: 2px solid #222 !default;
$carousel-nav-background-color-hover: #c0c0c0 !default;
$carousel-nav-border-color-hover: null !default;
$carousel-nav-background-color-active: #fff !default;
$carousel-nav-border-color-active: null !default;
// Tabs
$tabs-nav-border-color: #c0c0c0 !default;
$tabs-nav-item-background-color: null !default;
$tabs-nav-item-border-color: transparent !default;
$tabs-nav-item-color: null !default;
$tabs-nav-item-background-color-hover: #ebebeb !default;
$tabs-nav-item-border-color-hover: #c0c0c0 !default;
$tabs-nav-item-color-hover: null !default;
$tabs-nav-item-background-color-active: #fff !default;
$tabs-nav-item-border-color-active: #c0c0c0 !default;
$tabs-nav-item-color-active: #454545 !default;
// Dropdown
$accordion-border-color: #c0c0c0 !default;

View file

@ -0,0 +1,61 @@
// Media Query Breakpoints
@mixin bp($point) {
@if $point == xs {
@media (max-width: $grid-breakpoint-xs-max) {
@content;
}
}
@else if $point == s {
@media (min-width: $grid-breakpoint-s-min) and (max-width: $grid-breakpoint-s-max) {
@content;
}
}
@else if $point == m {
@media (min-width: $grid-breakpoint-m-min) and (max-width: $grid-breakpoint-m-max) {
@content;
}
}
@else if $point == l {
@media (min-width: $grid-breakpoint-l-min) {
@content;
}
}
}
// Minimum width.
@mixin bp-min($point) {
@if $point == s {
@media (min-width: $grid-breakpoint-s-min) {
@content;
}
}
@else if $point == m {
@media (min-width: $grid-breakpoint-m-min) {
@content;
}
}
@else if $point == l {
@media (min-width: $grid-breakpoint-l-min) {
@content;
}
}
}
// Max width.
@mixin bp-max($point) {
@if $point == xs {
@media (max-width: $grid-breakpoint-xs-max) {
@content;
}
}
@else if $point == s {
@media (max-width: $grid-breakpoint-s-max) {
@content;
}
}
@else if $point == m {
@media (max-width: $grid-breakpoint-m-max) {
@content;
}
}
}

View file

@ -0,0 +1,10 @@
//==
// Creates grid state classes for each breakpoint.
//##
@mixin grid-state($bp, $width) {
@include bp-min($bp) {
.grid-state-indicator {
width: $width;
}
}
}

View file

@ -0,0 +1,157 @@
//==
// Grid System - Base
//##
@mixin grid-base($bp) {
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
[class*=col-] {
// Reset classes for each level.
&.reset-#{$bp}-only {
clear: both;
margin-left: 0 !important;
[dir="rtl"] & {
margin-right: 0 !important;
}
}
}
}
}
// Set the margin for each following column.
[class*=col-#{$bp}] + [class*=col-#{$bp}] {
margin-left: $grid-column-gutter;
[dir="rtl"] & {
margin-left: 0;
margin-right: $grid-column-gutter;
}
}
.no-gutter > [class*=col-#{$bp}] {
margin-left: 0;
[dir="rtl"] & {
margin-left: 0;
margin-right: 0;
}
}
[class*=col-] {
// Global reset classes.
&.reset-#{$bp} {
clear: both;
margin-left: 0 !important;
[dir="rtl"] & {
margin-right: 0 !important;
}
}
}
}
//==
// Grid System - Columns
//##
@mixin grid-columns($bp) {
// Calculate column width and width with gutter.
$column-width: (100% / $grid-column-count);
$column-width-with-gutter: (100% - ($grid-column-gutter * ($grid-column-count - 1 ))) / $grid-column-count;
// Loop through and set width.
@for $i from 1 to ($grid-column-count + 1) {
$temp-width: $column-width-with-gutter * $i + ($grid-column-gutter * $i);
.col-#{$bp}-#{$i} {
width: $temp-width - $grid-column-gutter;
}
// We don't want add offsets etc to full width columns.
@if $i != $grid-column-count {
.offset-#{$bp}-#{$i} {
margin-left: $temp-width;
[dir="rtl"] & {
margin-left: 0;
margin-right: $temp-width;
}
}
[class*=col-] + .offset-#{$bp}-#{$i} {
margin-left: $temp-width + $grid-column-gutter;
[dir="rtl"] & {
margin-left: 0;
margin-right: $temp-width + $grid-column-gutter;
}
}
.push-#{$bp}-#{$i} {
left: $temp-width;
[dir="rtl"] & {
left: auto;
right: $temp-width;
}
}
.pull-#{$bp}-#{$i} {
right: $temp-width;
[dir="rtl"] & {
right: auto;
left: $temp-width;
}
}
}
@else {
// Ensure that the gutter is reset on full width columns.
.col-#{$bp}-#{$i},
[class*=col-] + [class*=col-#{$bp}-#{$i}] {
margin-left: 0;
[dir="rtl"] & {
margin-right: 0;
}
}
}
}
// Loop through and build the "no-gutter" columns.
.no-gutter {
@for $i from 1 to ($grid-column-count + 1) {
$temp-width: $column-width * $i;
> .col-#{$bp}-#{$i} {
width: $temp-width;
}
> .offset-#{$bp}-#{$i} {
margin-left: $temp-width;
[dir="rtl"] & {
margin-left: 0;
margin-right: $temp-width;
}
}
> .push-#{$bp}-#{$i} {
left: $temp-width;
[dir="rtl"] & {
left: auto;
right: $temp-width;
}
}
> .pull-#{$bp}-#{$i} {
right: $temp-width;
[dir="rtl"] & {
right: auto;
left: $temp-width;
}
}
}
}
}

View file

@ -0,0 +1,64 @@
@mixin layout($bp) {
// XS doesn't have a min value.
@if $bp == xs {
.block-#{$bp} {
display: block;
}
.inline-block-#{$bp} {
display: inline-block;
}
.inline-#{$bp} {
display: inline;
}
@include bp-max($bp) {
.block-#{$bp}-only {
display: block !important;
}
.inline-block-#{$bp}-only {
display: inline-block !important;
}
.inline-#{$bp}-only {
display: inline !important;
}
}
}
@else {
@include bp-min($bp) {
.block-#{$bp} {
display: block !important;
}
.inline-block-#{$bp} {
display: inline-block !important;
}
.inline-#{$bp} {
display: inline !important;
}
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
.block-#{$bp}-only {
display: block !important;
}
.inline-block-#{$bp}-only {
display: inline-block !important;
}
.inline-#{$bp}-only {
display: inline !important;
}
}
}
}
}
}

View file

@ -0,0 +1,83 @@
//==
// Creates float classes for each breakpoint.
//##
@mixin push-pull($bp) {
// XS doesn't have a min value.
@if $bp == xs {
.push-#{$bp} {
float: right !important;
[dir="rtl"] & {
float: left !important;
}
}
.pull-#{$bp} {
float: left !important;
[dir="rtl"] & {
float: right !important;
}
}
@include bp-max($bp) {
.push-#{$bp}-only {
float: right !important;
[dir="rtl"] & {
float: left !important;
}
}
.pull-#{$bp}-only {
float: left !important;
[dir="rtl"] & {
float: right !important;
}
}
}
}
@else {
@include bp-min($bp) {
.push-#{$bp} {
float: right !important;
[dir="rtl"] & {
float: left !important;
}
}
.pull-#{$bp} {
float: left !important;
[dir="rtl"] & {
float: right !important;
}
}
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
.push-#{$bp}-only {
float: right !important;
[dir="rtl"] & {
float: left !important;
}
}
.pull-#{$bp}-only {
float: left !important;
[dir="rtl"] & {
float: right !important;
}
}
}
}
}
}
}

View file

@ -0,0 +1,68 @@
//==
// Creates float classes for each breakpoint.
//##
@mixin push($bp, $direction) {
// XS doesn't have a min value.
@if $bp == xs {
.push-#{$bp} {
float: $direction !important;
}
@include bp-max($bp) {
.push-#{$bp}-only {
float: $direction !important;
}
}
}
@else {
@include bp-min($bp) {
.push-#{$bp} {
float: $direction !important;
}
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
.push-#{$bp}-only {
float: $direction !important;
}
}
}
}
}
}
@mixin pull($bp, $direction) {
// XS doesn't have a min value.
@if $bp == xs {
.pull-#{$bp} {
float: $direction !important;
}
@include bp-max($bp) {
.pull-#{$bp}-only {
float: $direction !important;
}
}
}
@else {
@include bp-min($bp) {
.pull-#{$bp} {
float: $direction !important;
}
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
.pull-#{$bp}-only {
float: $direction !important;
}
}
}
}
}
}

View file

@ -0,0 +1,67 @@
//==
// Creates text align classes for each breakpoint.
//##
@mixin text-align($bp) {
// XS doesn't have a min value.
@if $bp == xs {
.text-#{$bp}-left {
text-align: left !important;
}
.text-#{$bp}-right {
text-align: right !important;
}
.text-#{$bp}-center {
text-align: center !important;
}
@include bp-max($bp) {
.text-#{$bp}-left-only {
text-align: left !important;
}
.text-#{$bp}-right-only {
text-align: right !important;
}
.text-#{$bp}-center-only {
text-align: center !important;
}
}
}
@else {
@include bp-min($bp) {
.text-#{$bp}-left {
text-align: left !important;
}
.text-#{$bp}-right {
text-align: right !important;
}
.text-#{$bp}-center {
text-align: center !important;
}
// Large doesn't need an "only" since it operates on min width.
@if $bp != l {
@include bp-max($bp) {
.text-#{$bp}-left {
text-align: left !important;
}
.text-#{$bp}-right {
text-align: right !important;
}
.text-#{$bp}-center {
text-align: center !important;
}
}
}
}
}
}

View file

@ -0,0 +1,44 @@
//==
// Creates visibility classes for each breakpoint.
//##
@mixin visibility($bp) {
@include bp($bp) {
.hidden-#{$bp} {
display: none !important;
}
.visible-#{$bp} {
display: block !important;
}
table.visible-#{$bp} {
display: table;
}
thead.visible-#{$bp} {
display: table-header-group !important;
}
tfoot.visible-#{$bp} {
display: table-footer-group !important;
}
tr.visible-#{$bp} {
display: table-row !important;
}
th.visible-#{$bp},
td.visible-#{$bp} {
display: table-cell !important;
}
col.visible-#{$bp} {
display: table-column !important;
}
caption.visible-#{$bp} {
display: table-caption !important;
}
}
}