From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001 From: Gareth Coles Date: Tue, 5 Jun 2018 16:07:35 +0100 Subject: Move from CSS to SCSS (#86) * Rewrite existing style.css with sass * Add "uses-rst" class for pages that use rendered RST This replaces the previous method of just listing every page in the sass * Remove old debug print * Mixins and error pages * Newly built CSS * Add SASS cache to .gitignore * New error SASS * Slight changes to error template * Add UIKit SCSS to repo This includes the LICENSE and our customizations, which makes life way easier for contributors * Reorganize sass folder; your watchers can avoid uikit now * Sass folder should be called scss * Change variable names * [SCSS] Linting * Fix scss_lint gem name [ci skip] * [SCSS] Now you can compile with just Python! * Temporary hack to make the wiki editor taller * [SCSS] @jchristgit * [SCSS.py] Require specification of include dir to simplify the SCSS imports * [SCSS] All inline styles have been removed * [SCSS] Update UIKit theme to import from our variables * [SCSS] Remove extra newlines in errors/_common.scss --- scss/uikit/components/position.scss | 250 ++++++++++++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 scss/uikit/components/position.scss (limited to 'scss/uikit/components/position.scss') 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(){} -- cgit v1.2.3