diff options
Diffstat (limited to '')
| -rw-r--r-- | scss/uikit/components/position.scss | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/scss/uikit/components/position.scss b/scss/uikit/components/position.scss new file mode 100644 index 00000000..799b3587 --- /dev/null +++ b/scss/uikit/components/position.scss @@ -0,0 +1,250 @@ +// Name: Position +// Description: Utilities to position content +// +// Component: `uk-position-absolute` +// `uk-position-relative` +// `uk-position-z-index` +// `uk-position-top` +// `uk-position-bottom` +// `uk-position-left` +// `uk-position-right` +// `uk-position-top-left` +// `uk-position-top-center` +// `uk-position-top-right` +// `uk-position-bottom-left` +// `uk-position-bottom-center` +// `uk-position-bottom-right` +// `uk-position-center` +// `uk-position-center-left` +// `uk-position-center-right` +// `uk-position-cover` +// +// Modifiers: `uk-position-small` +// `uk-position-medium` +// `uk-position-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$position-small-margin: $global-small-gutter !default; +$position-medium-margin: $global-gutter !default; +$position-large-margin: $global-gutter !default; +$position-large-margin-l: 50px !default; + + +/* ======================================================================== + Component: Position + ========================================================================== */ + + +/* Directions + ========================================================================== */ + +[class*='uk-position-top'], +[class*='uk-position-bottom'], +[class*='uk-position-left'], +[class*='uk-position-right'], +[class*='uk-position-center'] { position: absolute !important; } + + +/* Edges + ========================================================================== */ + +/* Don't use `width: 100%` because it is wrong if the parent has padding. */ +.uk-position-top { + top: 0; + left: 0; + right: 0; +} + +.uk-position-bottom { + bottom: 0; + left: 0; + right: 0; +} + +.uk-position-left { + top: 0; + bottom: 0; + left: 0; +} + +.uk-position-right { + top: 0; + bottom: 0; + right: 0; +} + + +/* Corners + ========================================================================== */ + +.uk-position-top-left { + top: 0; + left: 0; +} + +.uk-position-top-right { + top: 0; + right: 0; +} + +.uk-position-bottom-left { + bottom: 0; + left: 0; +} + +.uk-position-bottom-right { + bottom: 0; + right: 0; +} + +/* + * Center + * 1. Fix text wrapping if content is larger than 50% of the container (Not working in Firefox) + * 2. Fix text wrapping for Firefox + */ + +.uk-position-center { + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + /* 1 */ + display: table; + /* 2 */ + width: -moz-max-content; + max-width: 100%; + box-sizing: border-box; +} + +/* Vertical */ +[class*='uk-position-center-left'], +[class*='uk-position-center-right'] { + top: 50%; + transform: translateY(-50%); +} + +.uk-position-center-left { left: 0; } +.uk-position-center-right { right: 0; } + +.uk-position-center-left-out { + right: 100%; + width: max-content; +} + +.uk-position-center-right-out { + left: 100%; + width: max-content; +} + +/* Horizontal */ +.uk-position-top-center, +.uk-position-bottom-center { + left: 50%; + transform: translateX(-50%); + /* 1 */ + display: table; + /* 2 */ + width: -moz-max-content; + max-width: 100%; + box-sizing: border-box; +} + +.uk-position-top-center { top: 0; } +.uk-position-bottom-center { bottom: 0; } + + +/* Cover + ========================================================================== */ + +.uk-position-cover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + + +/* Utility + ========================================================================== */ + +.uk-position-relative { position: relative !important; } + +.uk-position-absolute { position: absolute !important; } + +.uk-position-fixed { position: fixed !important; } + +.uk-position-z-index { z-index: 1; } + + +/* Margin modifier + ========================================================================== */ + +/* + * Small + */ + +.uk-position-small { margin: $position-small-margin; } + +.uk-position-small.uk-position-center { transform: translate(-50%, -50%) translate(-$position-small-margin, (-$position-small-margin)); } + +.uk-position-small[class*='uk-position-center-left'], +.uk-position-small[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-small-margin); } + +.uk-position-small.uk-position-top-center, +.uk-position-small.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-small-margin); } + +/* + * Medium + */ + +.uk-position-medium { margin: $position-medium-margin; } + +.uk-position-medium.uk-position-center { transform: translate(-50%, -50%) translate(-$position-medium-margin, (-$position-medium-margin)); } + +.uk-position-medium[class*='uk-position-center-left'], +.uk-position-medium[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-medium-margin); } + +.uk-position-medium.uk-position-top-center, +.uk-position-medium.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-medium-margin); } + +/* + * Large + */ + +.uk-position-large { margin: $position-large-margin; } + +.uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin, (-$position-large-margin)); } + +.uk-position-large[class*='uk-position-center-left'], +.uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin); } + +.uk-position-large.uk-position-top-center, +.uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin); } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-position-large { margin: $position-large-margin-l; } + + .uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin-l, (-$position-large-margin-l)); } + + .uk-position-large[class*='uk-position-center-left'], + .uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin-l); } + + .uk-position-large.uk-position-top-center, + .uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin-l); } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-position-misc)) {@include hook-position-misc();} + +// @mixin hook-position-misc(){} |