mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 18:37:35 +01:00
123 lines
2.4 KiB
Plaintext
123 lines
2.4 KiB
Plaintext
|
@mixin clear-fix {
|
||
|
&:before,
|
||
|
&:after {
|
||
|
display: table;
|
||
|
content: " ";
|
||
|
}
|
||
|
|
||
|
&:after { clear: both; }
|
||
|
|
||
|
*zoom: 1;
|
||
|
}
|
||
|
|
||
|
@mixin table-layout {
|
||
|
display: table;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
@mixin table-layout-cell($vertical-align: middle) {
|
||
|
display: table-cell;
|
||
|
vertical-align: $vertical-align;
|
||
|
}
|
||
|
|
||
|
@mixin visually-hidden {
|
||
|
position: absolute;
|
||
|
margin: -1px;
|
||
|
padding: 0;
|
||
|
border: 0;
|
||
|
width: 1px;
|
||
|
height: 1px;
|
||
|
overflow: hidden;
|
||
|
clip: rect(0 0 0 0);
|
||
|
|
||
|
&.focusable {
|
||
|
&:active,
|
||
|
&:focus {
|
||
|
position: static;
|
||
|
margin: 0;
|
||
|
width: auto;
|
||
|
height: auto;
|
||
|
overflow: visible;
|
||
|
clip: auto;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin invisible { visibility: hidden; }
|
||
|
|
||
|
@mixin image-replacement {
|
||
|
border: 0;
|
||
|
overflow: hidden;
|
||
|
background-color: transparent;
|
||
|
/* IE 6/7 fallback */
|
||
|
*text-indent: -9999px;
|
||
|
|
||
|
&:before {
|
||
|
display: block;
|
||
|
width: 0;
|
||
|
height: 150%;
|
||
|
content: "";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin hidden {
|
||
|
display: none !important;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
%clear-fix { @include clear-fix; }
|
||
|
|
||
|
%table-layout { @include table-layout; }
|
||
|
%table-layout-cell { @include table-layout-cell; }
|
||
|
%table-layout-cell-baseline { @include table-layout-cell(baseline); }
|
||
|
|
||
|
%hidden { @include hidden; }
|
||
|
.visually-hidden { @include visually-hidden; }
|
||
|
%invisible { @include invisible; }
|
||
|
|
||
|
%image-replacement { @include image-replacement; }
|
||
|
|
||
|
<% data.layout.resolutions.each do |resolution| %>
|
||
|
@include at-breakpoint($<%= resolution.target %>) {
|
||
|
%clear-fix-<%= resolution.target %> { @include clear-fix; }
|
||
|
|
||
|
%table-layout-<%= resolution.target %> { @include table-layout; }
|
||
|
%table-layout-cell-<%= resolution.target %> { @include table-layout-cell; }
|
||
|
%table-layout-cell-baseline-<%= resolution.target %> { @include table-layout-cell(baseline); }
|
||
|
|
||
|
%hidden-<%= resolution.target %> { @include hidden; }
|
||
|
.visually-hidden-<%= resolution.target %> { @include visually-hidden; }
|
||
|
%invisible-<%= resolution.target %> { @include invisible; }
|
||
|
|
||
|
%image-replacement-<%= resolution.target %> { @include image-replacement; }
|
||
|
}
|
||
|
<% end %>
|
||
|
|
||
|
|
||
|
|
||
|
.hide { display: none !important; }
|
||
|
.show { display: block !important; }
|
||
|
|
||
|
.fade {
|
||
|
@include transition(opacity 0.15s linear);
|
||
|
opacity: 0;
|
||
|
|
||
|
&.in { opacity: 1 }
|
||
|
}
|
||
|
|
||
|
.collapse {
|
||
|
display: none;
|
||
|
|
||
|
&.in { display: block; }
|
||
|
}
|
||
|
|
||
|
.collapsing {
|
||
|
@include transition(height 0.35s ease);
|
||
|
position: relative;
|
||
|
height: 0;
|
||
|
overflow: hidden;
|
||
|
}
|