mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.8 KiB
142 lines
2.8 KiB
// Name: Align
|
|
// Description: Utilities to align embedded content
|
|
//
|
|
// Component: `uk-align-left-*`
|
|
// `uk-align-right-*`
|
|
// `uk-align-center`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$align-margin-horizontal: $global-gutter !default;
|
|
$align-margin-vertical: $global-gutter !default;
|
|
|
|
$align-margin-horizontal-l: $global-medium-gutter !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Align
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Default
|
|
*/
|
|
|
|
[class*='uk-align'] {
|
|
display: block;
|
|
margin-bottom: $align-margin-vertical;
|
|
}
|
|
|
|
* + [class*='uk-align'] { margin-top: $align-margin-vertical; }
|
|
|
|
/*
|
|
* Center
|
|
*/
|
|
|
|
.uk-align-center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/*
|
|
* Left/Right
|
|
*/
|
|
|
|
.uk-align-left {
|
|
margin-top: 0;
|
|
margin-right: $align-margin-horizontal;
|
|
float: left;
|
|
}
|
|
|
|
.uk-align-right {
|
|
margin-top: 0;
|
|
margin-left: $align-margin-horizontal;
|
|
float: right;
|
|
}
|
|
|
|
/* Phone landscape and bigger */
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
.uk-align-left\@s {
|
|
margin-top: 0;
|
|
margin-right: $align-margin-horizontal;
|
|
float: left;
|
|
}
|
|
|
|
.uk-align-right\@s {
|
|
margin-top: 0;
|
|
margin-left: $align-margin-horizontal;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
/* Tablet landscape and bigger */
|
|
@media (min-width: $breakpoint-medium) {
|
|
|
|
.uk-align-left\@m {
|
|
margin-top: 0;
|
|
margin-right: $align-margin-horizontal;
|
|
float: left;
|
|
}
|
|
|
|
.uk-align-right\@m {
|
|
margin-top: 0;
|
|
margin-left: $align-margin-horizontal;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
/* Desktop and bigger */
|
|
@media (min-width: $breakpoint-large) {
|
|
|
|
.uk-align-left\@l {
|
|
margin-top: 0;
|
|
float: left;
|
|
}
|
|
|
|
.uk-align-right\@l {
|
|
margin-top: 0;
|
|
float: right;
|
|
}
|
|
|
|
.uk-align-left,
|
|
.uk-align-left\@s,
|
|
.uk-align-left\@m,
|
|
.uk-align-left\@l { margin-right: $align-margin-horizontal-l; }
|
|
|
|
.uk-align-right,
|
|
.uk-align-right\@s,
|
|
.uk-align-right\@m,
|
|
.uk-align-right\@l { margin-left: $align-margin-horizontal-l; }
|
|
|
|
}
|
|
|
|
/* Large screen and bigger */
|
|
@media (min-width: $breakpoint-xlarge) {
|
|
|
|
.uk-align-left\@xl {
|
|
margin-top: 0;
|
|
margin-right: $align-margin-horizontal-l;
|
|
float: left;
|
|
}
|
|
|
|
.uk-align-right\@xl {
|
|
margin-top: 0;
|
|
margin-left: $align-margin-horizontal-l;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-align-misc)) {@include hook-align-misc();}
|
|
|
|
// @mixin hook-align-misc(){}
|