mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 01:47:44 +01:00
145 lines
3.5 KiB
SCSS
145 lines
3.5 KiB
SCSS
// ===========================================================================
|
|
// PLACEHOLDER SELECTORS
|
|
// For @extend'ing.
|
|
|
|
|
|
|
|
%source-sans-pro-regular { @include font-face($source-sans-pro-regular); }
|
|
%source-sans-pro-bold { @include font-face($source-sans-pro-bold, 600); }
|
|
|
|
%chaparral-pro-regular { @include font-face($chaparral-pro-regular, 400); }
|
|
%chaparral-pro-semibold { @include font-face($chaparral-pro-semibold, 600); }
|
|
|
|
%source-code-pro-regular { @include font-face($source-code-pro-regular); }
|
|
|
|
|
|
|
|
%caps {
|
|
@extend %source-sans-pro-bold;
|
|
@include font-size($font-size-small);
|
|
letter-spacing: .0625em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CLEARFIX
|
|
|
|
/*
|
|
* 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.
|
|
*/
|
|
|
|
@mixin clearfix {
|
|
&:before,
|
|
&:after {
|
|
content: " "; /* 1 */
|
|
display: table; /* 2 */
|
|
}
|
|
|
|
&:after { clear: both; }
|
|
|
|
/*
|
|
* For IE 6/7 only
|
|
* Include this rule to trigger hasLayout and contain floats.
|
|
*/
|
|
*zoom: 1;
|
|
}
|
|
|
|
%clearfix { @include clearfix; }
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// FLOATS
|
|
|
|
@mixin float-with-margin($direction: left) {
|
|
@if $direction == "right" {
|
|
@include float-right;
|
|
margin-left: $gutter-width;
|
|
}
|
|
|
|
@else {
|
|
@include float-left;
|
|
margin-right: $gutter-width;
|
|
}
|
|
}
|
|
|
|
@mixin float-last-child($direction: left) {
|
|
@if $direction == "right" { margin-left: 0; }
|
|
|
|
@else { margin-right: 0; }
|
|
}
|
|
|
|
%float-left { @include float-with-margin; }
|
|
%float-right { @include float-with-margin(right); }
|
|
|
|
%float-left-last-child { @include float-last-child; }
|
|
%float-right-last-child { @include float-last-child(right); }
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// VISIBILITY
|
|
|
|
/*
|
|
* Hide from both screenreaders and browsers: h5bp.com/u
|
|
*/
|
|
|
|
@mixin hidden {
|
|
display: none !important;
|
|
visibility: hidden;
|
|
}
|
|
|
|
%hidden { @include hidden; }
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// iPhone
|
|
|
|
@mixin placeholder-selectors-iPhone {
|
|
%clearfix-iPhone { @include clearfix; }
|
|
|
|
%float-left-iPhone { @include float-with-margin; }
|
|
%float-right-iPhone { @include float-with-margin(right); }
|
|
|
|
%float-left-last-child-iPhone { @include float-last-child; }
|
|
%float-right-last-child-iPhone { @include float-last-child(right); }
|
|
|
|
%hidden-iPhone { @include hidden; }
|
|
}
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SMALL TABLET
|
|
|
|
@mixin placeholder-selectors-small-tablet {
|
|
%clearfix-small-tablet { @include clearfix; }
|
|
|
|
%float-left-small-tablet { @include float-with-margin; }
|
|
%float-right-small-tablet { @include float-with-margin(right); }
|
|
|
|
%float-left-last-child-small-tablet { @include float-last-child; }
|
|
%float-right-last-child-small-tablet { @include float-last-child(right); }
|
|
|
|
%hidden-small-tablet { @include hidden; }
|
|
}
|
|
|
|
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// iPad
|
|
|
|
@mixin placeholder-selectors-iPad {
|
|
%hidden-iPad { @include hidden; }
|
|
} |