updates
This commit is contained in:
185
client/uikit/src/scss/components/container.scss
Normal file
185
client/uikit/src/scss/components/container.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
// Name: Container
|
||||
// Description: Component to align and center your site and grid content
|
||||
//
|
||||
// Component: `uk-container`
|
||||
//
|
||||
// Modifier: `uk-container-small`
|
||||
// `uk-container-large`
|
||||
// `uk-container-expand`
|
||||
// `uk-container-expand-left`
|
||||
// `uk-container-expand-right`
|
||||
// `uk-container-item-padding-remove-left`
|
||||
// `uk-container-item-padding-remove-right`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$container-max-width: 1200px !default;
|
||||
$container-xsmall-max-width: 750px !default;
|
||||
$container-small-max-width: 900px !default;
|
||||
$container-large-max-width: 1400px !default;
|
||||
$container-xlarge-max-width: 1600px !default;
|
||||
|
||||
$container-padding-horizontal: 15px !default;
|
||||
$container-padding-horizontal-s: $global-gutter !default;
|
||||
$container-padding-horizontal-m: $global-medium-gutter !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Container
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Box sizing has to be `content-box` so the max-width is always the same and
|
||||
* unaffected by the padding on different breakpoints. It's important for the size modifiers.
|
||||
*/
|
||||
|
||||
.uk-container {
|
||||
display: flow-root;
|
||||
/* 1 */
|
||||
box-sizing: content-box;
|
||||
max-width: $container-max-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $container-padding-horizontal;
|
||||
padding-right: $container-padding-horizontal;
|
||||
}
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container {
|
||||
padding-left: $container-padding-horizontal-s;
|
||||
padding-right: $container-padding-horizontal-s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container {
|
||||
padding-left: $container-padding-horizontal-m;
|
||||
padding-right: $container-padding-horizontal-m;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-container > :last-child { margin-bottom: 0; }
|
||||
|
||||
/*
|
||||
* Remove padding from nested containers
|
||||
*/
|
||||
|
||||
.uk-container .uk-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Size modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-container-xsmall { max-width: $container-xsmall-max-width; }
|
||||
|
||||
.uk-container-small { max-width: $container-small-max-width; }
|
||||
|
||||
.uk-container-large { max-width: $container-large-max-width; }
|
||||
|
||||
.uk-container-xlarge { max-width: $container-xlarge-max-width; }
|
||||
|
||||
.uk-container-expand { max-width: none; }
|
||||
|
||||
|
||||
/* Expand modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Expand one side only
|
||||
*/
|
||||
|
||||
.uk-container-expand-left { margin-left: 0; }
|
||||
.uk-container-expand-right { margin-right: 0; }
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container-expand-left.uk-container-xsmall,
|
||||
.uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-s})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-small,
|
||||
.uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-s})'); }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container-expand-left,
|
||||
.uk-container-expand-right { max-width: unquote('calc(50% + (#{$container-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-xsmall,
|
||||
.uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-small,
|
||||
.uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-large,
|
||||
.uk-container-expand-right.uk-container-large { max-width: unquote('calc(50% + (#{$container-large-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-xlarge,
|
||||
.uk-container-expand-right.uk-container-xlarge { max-width: unquote('calc(50% + (#{$container-xlarge-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Utility classes to reset container padding on the left or right side
|
||||
* Note: It has to be negative margin on the item, because it's specific to the item.
|
||||
*/
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal); }
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-s); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-s); }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-m); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-m); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();}
|
||||
|
||||
// @mixin hook-container-misc(){}
|
||||
Reference in New Issue
Block a user