sass-site/source/assets/stylesheets/helpers/_helpers.scss.erb

123 lines
2.4 KiB
Plaintext
Raw Normal View History

2013-10-09 12:30:53 +02:00
@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;
}