diff options
Diffstat (limited to 'scss/uikit/components')
78 files changed, 13821 insertions, 0 deletions
diff --git a/scss/uikit/components/_import.components.scss b/scss/uikit/components/_import.components.scss new file mode 100644 index 00000000..445384fa --- /dev/null +++ b/scss/uikit/components/_import.components.scss @@ -0,0 +1,56 @@ +// Base +@import "variables.scss"; +@import "mixin.scss"; +@import "base.scss"; + +// Elements +@import "link.scss"; +@import "heading.scss"; +@import "divider.scss"; +@import "list.scss"; +@import "description-list.scss"; +@import "table.scss"; +@import "icon.scss"; +@import "form.scss"; // After: Icon +@import "button.scss"; + +// Layout +@import "section.scss"; +@import "container.scss"; +@import "grid.scss"; +@import "tile.scss"; +@import "card.scss"; + +// Common +@import "close.scss"; // After: Icon +@import "spinner.scss"; // After: Icon +@import "totop.scss"; // After: Icon +@import "alert.scss"; // After: Close +@import "badge.scss"; +@import "label.scss"; +@import "overlay.scss"; // After: Icon +@import "article.scss"; // After: Subnav +@import "comment.scss"; // After: Subnav +@import "search.scss"; // After: Icon + +// Navs +@import "nav.scss"; +@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search +@import "subnav.scss"; +@import "breadcrumb.scss"; +@import "pagination.scss"; +@import "tab.scss"; +@import "slidenav.scss"; // After: Icon +@import "dotnav.scss"; + +// JavaScript +@import "accordion.scss"; +@import "drop.scss"; // After: Card +@import "dropdown.scss"; // After: Card +@import "modal.scss"; // After: Close +@import "sticky.scss"; +@import "offcanvas.scss"; +@import "switcher.scss"; +// Scrollspy +// Toggle +// Scroll diff --git a/scss/uikit/components/_import.scss b/scss/uikit/components/_import.scss new file mode 100644 index 00000000..0d5fbd87 --- /dev/null +++ b/scss/uikit/components/_import.scss @@ -0,0 +1,94 @@ +// Base +@import "variables.scss"; +@import "mixin.scss"; +@import "base.scss"; + +// Elements +@import "link.scss"; +@import "heading.scss"; +@import "divider.scss"; +@import "list.scss"; +@import "description-list.scss"; +@import "table.scss"; +@import "icon.scss"; +@import "form-range.scss"; +@import "form.scss"; // After: Icon, Form Range +@import "button.scss"; + +// Layout +@import "section.scss"; +@import "container.scss"; +@import "grid.scss"; +@import "tile.scss"; +@import "card.scss"; + +// Common +@import "close.scss"; // After: Icon +@import "spinner.scss"; // After: Icon +@import "totop.scss"; // After: Icon +@import "marker.scss"; // After: Icon +@import "alert.scss"; // After: Close +@import "badge.scss"; +@import "label.scss"; +@import "overlay.scss"; // After: Icon +@import "article.scss"; // After: Subnav +@import "comment.scss"; // After: Subnav +@import "search.scss"; // After: Icon + +// Navs +@import "nav.scss"; +@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search +@import "subnav.scss"; +@import "breadcrumb.scss"; +@import "pagination.scss"; +@import "tab.scss"; +@import "slidenav.scss"; // After: Icon +@import "dotnav.scss"; +@import "thumbnav.scss"; + +// JavaScript +@import "accordion.scss"; +@import "drop.scss"; // After: Card +@import "dropdown.scss"; // After: Card +@import "modal.scss"; // After: Close +@import "lightbox.scss"; // After: Close +@import "slideshow.scss"; +@import "slider.scss"; +@import "sticky.scss"; +@import "offcanvas.scss"; +@import "switcher.scss"; +@import "leader.scss"; +// Scrollspy +// Toggle +// Scroll + +// Additional +@import "iconnav.scss"; +@import "notification.scss"; +@import "tooltip.scss"; +@import "placeholder.scss"; +@import "progress.scss"; +@import "sortable.scss"; +@import "countdown.scss"; + +// Utilities +@import "animation.scss"; +@import "width.scss"; +@import "height.scss"; +@import "text.scss"; +@import "column.scss"; +@import "cover.scss"; +@import "background.scss"; +@import "align.scss"; +@import "svg.scss"; +@import "utility.scss"; +@import "flex.scss"; // After: Utility +@import "margin.scss"; +@import "padding.scss"; +@import "position.scss"; +@import "transition.scss"; +@import "visibility.scss"; +@import "inverse.scss"; + +// Need to be loaded last +@import "print.scss"; diff --git a/scss/uikit/components/_import.utilities.scss b/scss/uikit/components/_import.utilities.scss new file mode 100644 index 00000000..bea39e5c --- /dev/null +++ b/scss/uikit/components/_import.utilities.scss @@ -0,0 +1,19 @@ +// Utilities +@import "animation.scss"; +@import "width.scss"; +@import "text.scss"; +@import "column.scss"; +@import "cover.scss"; +@import "background.scss"; +@import "align.scss"; +@import "utility.scss"; +@import "flex.scss"; // After: Utility +@import "margin.scss"; +@import "padding.scss"; +@import "position.scss"; +@import "transition.scss"; +@import "visibility.scss"; +@import "inverse.scss"; + +// Need to be loaded last +@import "print.scss"; diff --git a/scss/uikit/components/accordion.scss b/scss/uikit/components/accordion.scss new file mode 100644 index 00000000..bfb0e815 --- /dev/null +++ b/scss/uikit/components/accordion.scss @@ -0,0 +1,118 @@ +// Name: Accordion +// Description: Component to create accordions +// +// Component: `uk-accordion` +// +// Sub-objects: `uk-accordion-title` +// `uk-accordion-content` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$accordion-item-margin-top: $global-margin !default; + +$accordion-title-font-size: $global-medium-font-size !default; +$accordion-title-line-height: 1.4 !default; +$accordion-title-color: $global-emphasis-color !default; +$accordion-title-hover-color: $global-color !default; + +$accordion-content-margin-top: $global-margin !default; + + +/* ======================================================================== + Component: Accordion + ========================================================================== */ + +.uk-accordion { + padding: 0; + list-style: none; + @if(mixin-exists(hook-accordion)) {@include hook-accordion();} +} + + +/* Item + ========================================================================== */ + +.uk-accordion > :nth-child(n+2) { + margin-top: $accordion-item-margin-top; + @if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();} +} + + +/* Title + ========================================================================== */ + +.uk-accordion-title { + display: block; + font-size: $accordion-title-font-size; + line-height: $accordion-title-line-height; + color: $accordion-title-color; + @if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();} +} + +/* Hover + Focus */ +.uk-accordion-title:hover, +.uk-accordion-title:focus { + color: $accordion-title-hover-color; + text-decoration: none; + outline: none; + @if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();} +} + + +/* Content + ========================================================================== */ + +.uk-accordion-content { + margin-top: $accordion-content-margin-top; + @if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();} +} + +/* + * Micro clearfix + */ + +.uk-accordion-content::before, +.uk-accordion-content::after { + content: ""; + display: table; +} + +.uk-accordion-content::after { clear: both; } + +/* + * Remove margin from the last-child + */ + + .uk-accordion-content > :last-child { margin-bottom: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();} + +// @mixin hook-accordion(){} +// @mixin hook-accordion-item(){} +// @mixin hook-accordion-title(){} +// @mixin hook-accordion-title-hover(){} +// @mixin hook-accordion-content(){} +// @mixin hook-accordion-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-accordion-title-color: $inverse-global-emphasis-color !default; +$inverse-accordion-title-hover-color: $inverse-global-inverse-color !default; + + + +// @mixin hook-inverse-accordion-item(){} +// @mixin hook-inverse-accordion-title(){} +// @mixin hook-inverse-accordion-title-hover(){}
\ No newline at end of file diff --git a/scss/uikit/components/alert.scss b/scss/uikit/components/alert.scss new file mode 100644 index 00000000..8922cc85 --- /dev/null +++ b/scss/uikit/components/alert.scss @@ -0,0 +1,147 @@ +// Name: Alert +// Description: Component to create alert messages +// +// Component: `uk-alert` +// +// Adopted: `uk-alert-close` +// +// Modifiers: `uk-alert-primary` +// `uk-alert-success` +// `uk-alert-warning` +// `uk-alert-danger` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$alert-margin-vertical: $global-margin !default; +$alert-padding: $global-small-gutter !default; +$alert-padding-right: $alert-padding + 14px !default; +$alert-background: $global-muted-background !default; +$alert-color: $global-color !default; + +$alert-close-top: $alert-padding + 5px !default; +$alert-close-right: $alert-padding !default; + +$alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default; +$alert-primary-color: $global-primary-background !default; + +$alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default; +$alert-success-color: $global-success-background !default; + +$alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default; +$alert-warning-color: $global-warning-background !default; + +$alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default; +$alert-danger-color: $global-danger-background !default; + + +/* ======================================================================== + Component: Alert + ========================================================================== */ + +.uk-alert { + position: relative; + margin-bottom: $alert-margin-vertical; + padding: $alert-padding $alert-padding-right $alert-padding $alert-padding; + background: $alert-background; + color: $alert-color; + @if(mixin-exists(hook-alert)) {@include hook-alert();} +} + +/* Add margin if adjacent element */ +* + .uk-alert { margin-top: $alert-margin-vertical; } + +/* + * Remove margin from the last-child + */ + +.uk-alert > :last-child { margin-bottom: 0; } + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +.uk-alert-close { + position: absolute; + top: $alert-close-top; + right: $alert-close-right; + @if(mixin-exists(hook-alert-close)) {@include hook-alert-close();} +} + +/* + * Remove margin from adjacent element + */ + +.uk-alert-close:first-child + * { margin-top: 0; } + +/* + * Hover + Focus + */ + +.uk-alert-close:hover, +.uk-alert-close:focus { + @if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();} +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Primary + */ + +.uk-alert-primary { + background: $alert-primary-background; + color: $alert-primary-color; + @if(mixin-exists(hook-alert-primary)) {@include hook-alert-primary();} +} + +/* + * Success + */ + +.uk-alert-success { + background: $alert-success-background; + color: $alert-success-color; + @if(mixin-exists(hook-alert-success)) {@include hook-alert-success();} +} + +/* + * Warning + */ + +.uk-alert-warning { + background: $alert-warning-background; + color: $alert-warning-color; + @if(mixin-exists(hook-alert-warning)) {@include hook-alert-warning();} +} + +/* + * Danger + */ + +.uk-alert-danger { + background: $alert-danger-background; + color: $alert-danger-color; + @if(mixin-exists(hook-alert-danger)) {@include hook-alert-danger();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-alert-misc)) {@include hook-alert-misc();} + +// @mixin hook-alert(){} +// @mixin hook-alert-close(){} +// @mixin hook-alert-close-hover(){} +// @mixin hook-alert-primary(){} +// @mixin hook-alert-success(){} +// @mixin hook-alert-warning(){} +// @mixin hook-alert-danger(){} +// @mixin hook-alert-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/align.scss b/scss/uikit/components/align.scss new file mode 100644 index 00000000..bee6702b --- /dev/null +++ b/scss/uikit/components/align.scss @@ -0,0 +1,142 @@ +// 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(){}
\ No newline at end of file diff --git a/scss/uikit/components/animation.scss b/scss/uikit/components/animation.scss new file mode 100644 index 00000000..c1d91928 --- /dev/null +++ b/scss/uikit/components/animation.scss @@ -0,0 +1,390 @@ +// Name: Animation +// Description: Utilities for keyframe animations +// +// Component: `uk-animation-*` +// +// Modifiers: `uk-animation-reverse` +// `uk-animation-fast` +// `uk-animation-fade` +// `uk-animation-scale-up` +// `uk-animation-scale-down` +// `uk-animation-slide-top-*` +// `uk-animation-slide-bottom-*` +// `uk-animation-slide-left-*` +// `uk-animation-slide-right-*` +// `uk-animation-kenburns` +// `uk-animation-shake` +// +// Sub-objects: `uk-animation-toggle` +// +// States: `uk-hover` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$animation-duration: 0.5s !default; +$animation-fade-duration: 0.8s !default; +$animation-kenburns-duration: 15s !default; +$animation-fast-duration: 0.1s !default; + +$animation-slide-small-translate: 10px !default; +$animation-slide-medium-translate: 50px !default; + + +/* ======================================================================== + Component: Animation + ========================================================================== */ + +[class*='uk-animation-'] { + animation-duration: $animation-duration; + animation-timing-function: ease-out; + animation-fill-mode: both; +} + + +/* Direction modifier + ========================================================================== */ + +.uk-animation-reverse { + animation-direction: reverse; + animation-timing-function: ease-in; +} + + +/* Animations for scrollspy + ========================================================================== */ + +/* + * Fade + */ + +.uk-animation-fade { + animation-name: uk-fade; + animation-duration: $animation-fade-duration; + animation-timing-function: linear; +} + +/* + * Scale + */ + +.uk-animation-scale-up { animation-name: uk-fade-scale-02; } +.uk-animation-scale-down { animation-name: uk-fade-scale-18; } + +/* + * Slide + */ + +.uk-animation-slide-top { animation-name: uk-fade-top; } +.uk-animation-slide-bottom { animation-name: uk-fade-bottom; } +.uk-animation-slide-left { animation-name: uk-fade-left; } +.uk-animation-slide-right { animation-name: uk-fade-right; } + +/* + * Slide Small + */ + +.uk-animation-slide-top-small { animation-name: uk-fade-top-small; } +.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; } +.uk-animation-slide-left-small { animation-name: uk-fade-left-small; } +.uk-animation-slide-right-small { animation-name: uk-fade-right-small; } + +/* + * Slide Medium + */ + +.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; } +.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; } +.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; } +.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; } + +/* + * Kenburns + */ + +.uk-animation-kenburns { + animation-name: uk-scale-kenburns; + animation-duration: $animation-kenburns-duration; +} + +/* + * Shake + */ + +.uk-animation-shake { animation-name: uk-shake; } + + +/* Duration modifier + ========================================================================== */ + +.uk-animation-fast { animation-duration: $animation-fast-duration; } + + +/* Enable animation only on hover +========================================================================== */ + +/* + * Note: Firefox and IE needs this because animations are not triggered when switching between display `none` and `block` + */ + +.uk-animation-toggle:not(:hover):not(.uk-hover) [class*='uk-animation-'] { animation-name: none; } + + +/* Keyframes used by animation classes + ========================================================================== */ + +/* + * Fade + */ + +@keyframes uk-fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +/* + * Slide Top + */ + +@keyframes uk-fade-top { + 0% { + opacity: 0; + transform: translateY(-100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom + */ + +@keyframes uk-fade-bottom { + 0% { + opacity: 0; + transform: translateY(100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left + */ + +@keyframes uk-fade-left { + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right + */ + +@keyframes uk-fade-right { + 0% { + opacity: 0; + transform: translateX(100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Top Small + */ + +@keyframes uk-fade-top-small { + 0% { + opacity: 0; + transform: translateY(-$animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom Small + */ + +@keyframes uk-fade-bottom-small { + 0% { + opacity: 0; + transform: translateY($animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left Small + */ + +@keyframes uk-fade-left-small { + 0% { + opacity: 0; + transform: translateX(-$animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right Small + */ + +@keyframes uk-fade-right-small { + 0% { + opacity: 0; + transform: translateX($animation-slide-small-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Top Medium + */ + +@keyframes uk-fade-top-medium { + 0% { + opacity: 0; + transform: translateY(-$animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Bottom Medium + */ + +@keyframes uk-fade-bottom-medium { + 0% { + opacity: 0; + transform: translateY($animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* + * Slide Left Medium + */ + +@keyframes uk-fade-left-medium { + 0% { + opacity: 0; + transform: translateX(-$animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Slide Right Medium + */ + +@keyframes uk-fade-right-medium { + 0% { + opacity: 0; + transform: translateX($animation-slide-medium-translate); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* + * Scale Up + */ + +@keyframes uk-fade-scale-02 { + 0% { + opacity: 0; + transform: scale(0.2); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* + * Scale Down + */ + +@keyframes uk-fade-scale-18 { + 0% { + opacity: 0; + transform: scale(1.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* + * Kenburns + */ + +@keyframes uk-scale-kenburns { + 0% { transform: scale(1); } + 100% { transform: scale(1.2); } +} + +/* + * Shake + */ + +@keyframes uk-shake { + 0%, 100% { transform: translateX(0); } + 10% { transform: translateX(-9px); } + 20% { transform: translateX(8px); } + 30% { transform: translateX(-7px); } + 40% { transform: translateX(6px); } + 50% { transform: translateX(-5px); } + 60% { transform: translateX(4px); } + 70% { transform: translateX(-3px); } + 80% { transform: translateX(2px); } + 90% { transform: translateX(-1px); } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();} + +// @mixin hook-animation-misc(){} diff --git a/scss/uikit/components/article.scss b/scss/uikit/components/article.scss new file mode 100644 index 00000000..3d4011f9 --- /dev/null +++ b/scss/uikit/components/article.scss @@ -0,0 +1,110 @@ +// Name: Article +// Description: Component to create articles +// +// Component: `uk-article` +// +// Sub-objects: `uk-article-title` +// `uk-article-meta` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$article-margin-top: $global-large-margin !default; + +$article-title-font-size-m: $global-xxlarge-font-size !default; +$article-title-font-size: $article-title-font-size-m * 0.85 !default; +$article-title-line-height: 1.2 !default; + +$article-meta-font-size: $global-small-font-size !default; +$article-meta-line-height: 1.4 !default; +$article-meta-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Article + ========================================================================== */ + +.uk-article { + @if(mixin-exists(hook-article)) {@include hook-article();} +} + +/* + * Micro clearfix + */ + +.uk-article::before, +.uk-article::after { + content: ""; + display: table; +} + +.uk-article::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-article > :last-child { margin-bottom: 0; } + + +/* Adjacent sibling + ========================================================================== */ + +.uk-article + .uk-article { + margin-top: $article-margin-top; + @if(mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();} +} + + +/* Title + ========================================================================== */ + +.uk-article-title { + font-size: $article-title-font-size; + line-height: $article-title-line-height; + @if(mixin-exists(hook-article-title)) {@include hook-article-title();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-article-title { font-size: $article-title-font-size-m; } + +} + + +/* Meta + ========================================================================== */ + +.uk-article-meta { + font-size: $article-meta-font-size; + line-height: $article-meta-line-height; + color: $article-meta-color; + @if(mixin-exists(hook-article-meta)) {@include hook-article-meta();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-article-misc)) {@include hook-article-misc();} + +// @mixin hook-article(){} +// @mixin hook-article-adjacent(){} +// @mixin hook-article-title(){} +// @mixin hook-article-meta(){} +// @mixin hook-article-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-article-meta-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-article-title(){} +// @mixin hook-inverse-article-meta(){}
\ No newline at end of file diff --git a/scss/uikit/components/background.scss b/scss/uikit/components/background.scss new file mode 100644 index 00000000..ca7a344a --- /dev/null +++ b/scss/uikit/components/background.scss @@ -0,0 +1,136 @@ +// Name: Background +// Description: Utilities for backgrounds +// +// Component: `uk-background-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$background-default-background: $global-background !default; +$background-muted-background: $global-muted-background !default; +$background-primary-background: $global-primary-background !default; +$background-secondary-background: $global-secondary-background !default; + + +/* ======================================================================== + Component: Background + ========================================================================== */ + + +/* Color + ========================================================================== */ + +.uk-background-default { background-color: $background-default-background; } +.uk-background-muted { background-color: $background-muted-background; } +.uk-background-primary { background-color: $background-primary-background; } +.uk-background-secondary { background-color: $background-secondary-background; } + + +/* Size + ========================================================================== */ + +.uk-background-cover, +.uk-background-contain { + background-position: 50% 50%; + background-repeat: no-repeat; +} + +.uk-background-cover { background-size: cover; } +.uk-background-contain { background-size: contain; } + + +/* Position + ========================================================================== */ + +.uk-background-top-left { background-position: 0 0; } +.uk-background-top-center { background-position: 50% 0; } +.uk-background-top-right { background-position: 100% 0; } +.uk-background-center-left { background-position: 0 50%; } +.uk-background-center-center { background-position: 50% 50%; } +.uk-background-center-right { background-position: 100% 50%; } +.uk-background-bottom-left { background-position: 0 100%; } +.uk-background-bottom-center { background-position: 50% 100%; } +.uk-background-bottom-right { background-position: 100% 100%; } + + +/* Repeat + ========================================================================== */ + +.uk-background-norepeat { background-repeat: no-repeat; } + + +/* Attachment + ========================================================================== */ + +.uk-background-fixed { background-attachment: fixed; } + +/* + * Exclude touch devices because `fixed` doesn't work on iOS and Android + */ + +@media (pointer: coarse) { + .uk-background-fixed { background-attachment: scroll; } +} + + +/* Image + ========================================================================== */ + +/* Phone portrait and smaller */ +@media (max-width: $breakpoint-xsmall-max) { + + .uk-background-image\@s { background-image: none !important; } + +} + +/* Phone landscape and smaller */ +@media (max-width: $breakpoint-small-max) { + + .uk-background-image\@m { background-image: none !important; } + +} + +/* Tablet landscape and smaller */ +@media (max-width: $breakpoint-medium-max) { + + .uk-background-image\@l { background-image: none !important; } + +} + +/* Desktop and smaller */ +@media (max-width: $breakpoint-large-max) { + + .uk-background-image\@xl {background-image: none !important; } + +} + + +/* Blend modes + ========================================================================== */ + +.uk-background-blend-multiply { background-blend-mode: multiply; } +.uk-background-blend-screen { background-blend-mode: screen; } +.uk-background-blend-overlay { background-blend-mode: overlay; } +.uk-background-blend-darken { background-blend-mode: darken; } +.uk-background-blend-lighten { background-blend-mode: lighten; } +.uk-background-blend-color-dodge { background-blend-mode: color-dodge; } +.uk-background-blend-color-burn { background-blend-mode: color-burn; } +.uk-background-blend-hard-light { background-blend-mode: hard-light; } +.uk-background-blend-soft-light { background-blend-mode: soft-light; } +.uk-background-blend-difference { background-blend-mode: difference; } +.uk-background-blend-exclusion { background-blend-mode: exclusion; } +.uk-background-blend-hue { background-blend-mode: hue; } +.uk-background-blend-saturation { background-blend-mode: saturation; } +.uk-background-blend-color { background-blend-mode: color; } +.uk-background-blend-luminosity { background-blend-mode: luminosity; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-background-misc)) {@include hook-background-misc();} + +// @mixin hook-background-misc(){} diff --git a/scss/uikit/components/badge.scss b/scss/uikit/components/badge.scss new file mode 100644 index 00000000..ab79ae28 --- /dev/null +++ b/scss/uikit/components/badge.scss @@ -0,0 +1,83 @@ +// Name: Badge +// Description: Component to create notification badges +// +// Component: `uk-badge` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$badge-size: 22px !default; +$badge-padding-vertical: 0 !default; +$badge-padding-horizontal: 5px !default; +$badge-border-radius: 500px !default; +$badge-background: $global-primary-background !default; +$badge-color: $global-inverse-color !default; +$badge-font-size: $global-small-font-size !default; + +$badge-hover-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Badge + ========================================================================== */ + +/* + * 1. Style + * 2. Center child vertically and horizontally + */ + +.uk-badge { + box-sizing: border-box; + min-width: $badge-size; + height: $badge-size; + padding: $badge-padding-vertical $badge-padding-horizontal; + border-radius: $badge-border-radius; + vertical-align: middle; + /* 1 */ + background: $badge-background; + color: $badge-color; + font-size: $badge-font-size; + /* 2 */ + display: inline-flex; + justify-content: center; + align-items: center; + @if(mixin-exists(hook-badge)) {@include hook-badge();} +} + +/* + * Required for `a` + */ + +.uk-badge:hover, +.uk-badge:focus { + color: $badge-hover-color; + text-decoration: none; + outline: none; + @if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-badge-misc)) {@include hook-badge-misc();} + +// @mixin hook-badge(){} +// @mixin hook-badge-hover(){} +// @mixin hook-badge-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-badge-background: $inverse-global-primary-background !default; +$inverse-badge-color: $inverse-global-inverse-color !default; +$inverse-badge-hover-color: $inverse-global-inverse-color !default; + + + +// @mixin hook-inverse-badge(){} +// @mixin hook-inverse-badge-hover(){}
\ No newline at end of file diff --git a/scss/uikit/components/base.scss b/scss/uikit/components/base.scss new file mode 100644 index 00000000..c3f4137a --- /dev/null +++ b/scss/uikit/components/base.scss @@ -0,0 +1,629 @@ +// Name: Base +// Description: Default values for HTML elements +// +// Component: `uk-link` +// `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6` +// `uk-hr` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$base-body-background: $global-background !default; +$base-body-font-family: $global-font-family !default; +$base-body-font-weight: normal !default; +$base-body-font-size: $global-font-size !default; +$base-body-line-height: $global-line-height !default; +$base-body-color: $global-color !default; + +$base-link-color: $global-link-color !default; +$base-link-text-decoration: none !default; +$base-link-hover-color: $global-link-hover-color !default; +$base-link-hover-text-decoration: underline !default; + +$base-strong-font-weight: bolder !default; +$base-code-font-size: $global-small-font-size !default; +$base-code-font-family: Consolas, monaco, monospace !default; +$base-code-color: $global-danger-background !default; +$base-em-color: $global-danger-background !default; +$base-ins-background: #ffd !default; +$base-ins-color: $global-color !default; +$base-mark-background: #ffd !default; +$base-mark-color: $global-color !default; +$base-quote-font-style: italic !default; +$base-small-font-size: 80% !default; + +$base-margin-vertical: $global-margin !default; + +$base-heading-font-family: $global-font-family !default; +$base-heading-font-weight: normal !default; +$base-heading-color: $global-emphasis-color !default; +$base-heading-text-transform: none !default; +$base-heading-margin-top: $global-medium-margin !default; +$base-h1-font-size-m: $global-xxlarge-font-size !default; +$base-h1-font-size: $base-h1-font-size-m * 0.85 !default; +$base-h1-line-height: 1.2 !default; +$base-h2-font-size-m: $global-xlarge-font-size !default; +$base-h2-font-size: $base-h2-font-size-m * 0.85 !default; +$base-h2-line-height: 1.3 !default; +$base-h3-font-size: $global-large-font-size !default; +$base-h3-line-height: 1.4 !default; +$base-h4-font-size: $global-medium-font-size !default; +$base-h4-line-height: 1.4 !default; +$base-h5-font-size: $global-font-size !default; +$base-h5-line-height: 1.4 !default; +$base-h6-font-size: $global-small-font-size !default; +$base-h6-line-height: 1.4 !default; + +$base-list-padding-left: 30px !default; + +$base-hr-margin-vertical: $global-margin !default; +$base-hr-border-width: $global-border-width !default; +$base-hr-border: $global-border !default; + +$base-blockquote-font-size: $global-medium-font-size !default; +$base-blockquote-line-height: 1.5 !default; +$base-blockquote-font-style: italic !default; +$base-blockquote-margin-vertical: $global-margin !default; +$base-blockquote-footer-margin-top: $global-small-margin !default; +$base-blockquote-footer-font-size: $global-small-font-size !default; +$base-blockquote-footer-line-height: 1.5 !default; + +$base-pre-font-size: $global-small-font-size !default; +$base-pre-line-height: 1.5 !default; +$base-pre-font-family: $base-code-font-family !default; +$base-pre-color: $global-color !default; + +$base-selection-background: #39f !default; +$base-selection-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Base + ========================================================================== */ + +/* + * 1. Set `font-size` to support `rem` units + * Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge + * 2. Prevent adjustments of font size after orientation changes in iOS. + * 3. Style + */ + +html { + /* 1 */ + font-family: $base-body-font-family; + font-size: $base-body-font-size; + font-weight: $base-body-font-weight; + line-height: $base-body-line-height; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 3 */ + background: $base-body-background; + color: $base-body-color; + @if(mixin-exists(hook-base-body)) {@include hook-base-body();} +} + +/* + * Remove the margin in all browsers. + */ + +body { margin: 0; } + + +/* Links + ========================================================================== */ + +/* + * Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { -webkit-text-decoration-skip: objects; } + +/* + * Remove the outline on focused links when they are also active or hovered + */ + +a:active, +a:hover { outline: none; } + +/* + * Style + */ + +a, +.uk-link { + color: $base-link-color; + text-decoration: $base-link-text-decoration; + cursor: pointer; + @if(mixin-exists(hook-base-link)) {@include hook-base-link();} +} + +a:hover, +.uk-link:hover { + color: $base-link-hover-color; + text-decoration: $base-link-hover-text-decoration; + @if(mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();} +} + + +/* Text-level semantics + ========================================================================== */ + +/* + * 1. Remove the bottom border in Chrome 57-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + /* 1 */ + border-bottom: none; + /* 2 */ + text-decoration: underline; + text-decoration: underline dotted; +} + + +/* + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { font-weight: $base-strong-font-weight; } + +/* + * 1. Consolas has a better baseline in running text compared to `Courier` + * 2. Correct the odd `em` font sizing in all browsers. + * 3. Style + */ + +:not(pre) > code, +:not(pre) > kbd, +:not(pre) > samp { + /* 1 */ + font-family: $base-code-font-family; + /* 2 */ + font-size: $base-code-font-size; + /* 3 */ + color: $base-code-color; + white-space: nowrap; + @if(mixin-exists(hook-base-code)) {@include hook-base-code();} +} + +/* + * Emphasize + */ + +em { color: $base-em-color; } + +/* + * Insert + */ + +ins { + background: $base-ins-background; + color: $base-ins-color; + text-decoration: none; +} + +/* + * Mark + */ + +mark { + background: $base-mark-background; + color: $base-mark-color; +} + +/* + * Quote + */ + +q { font-style: $base-quote-font-style; } + +/* + * Add the correct font size in all browsers. + */ + +small { font-size: $base-small-font-size; } + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { top: -0.5em; } +sub { bottom: -0.25em; } + + +/* Embedded content + ========================================================================== */ + +/* + * Remove the gap between embedded content and the bottom of their containers. + */ + +audio, +canvas, +iframe, +img, +svg, +video { vertical-align: middle; } + +/* + * Responsiveness + * 1. Set a maximum width + * 2. Auto scale the height. Only needed if `height` attribute is present + * 2. Corrects `max-width` behavior if padding and border are used + */ + +audio, +canvas, +img, +video { + /* 1 */ + max-width: 100%; + /* 2 */ + height: auto; + /* 3 */ + box-sizing: border-box; +} + +/* + * Hide the overflow in IE. + */ + +svg:not(:root) { overflow: hidden; } + +/* + * Hide `alt` text for lazy load images + * Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; } + */ + +img:not([src]) { visibility: hidden; } + + +/* Block elements + ========================================================================== */ + +/* + * Margins + */ + +p, +ul, +ol, +dl, +pre, +address, +fieldset, +figure { margin: 0 0 $base-margin-vertical 0; } + +/* Add margin if adjacent element */ +* + p, +* + ul, +* + ol, +* + dl, +* + pre, +* + address, +* + fieldset, +* + figure { margin-top: $base-margin-vertical; } + + +/* Headings + ========================================================================== */ + +h1, .uk-h1, +h2, .uk-h2, +h3, .uk-h3, +h4, .uk-h4, +h5, .uk-h5, +h6, .uk-h6 { + margin: 0 0 $base-margin-vertical 0; + font-family: $base-heading-font-family; + font-weight: $base-heading-font-weight; + color: $base-heading-color; + text-transform: $base-heading-text-transform; + @if(mixin-exists(hook-base-heading)) {@include hook-base-heading();} +} + +/* Add margin if adjacent element */ +* + h1, * + .uk-h1, +* + h2, * + .uk-h2, +* + h3, * + .uk-h3, +* + h4, * + .uk-h4, +* + h5, * + .uk-h5, +* + h6, * + .uk-h6 { margin-top: $base-heading-margin-top; } + +/* + * Sizes + */ + +h1, .uk-h1 { + font-size: $base-h1-font-size; + line-height: $base-h1-line-height; + @if(mixin-exists(hook-base-h1)) {@include hook-base-h1();} +} + +h2, .uk-h2 { + font-size: $base-h2-font-size; + line-height: $base-h2-line-height; + @if(mixin-exists(hook-base-h2)) {@include hook-base-h2();} +} + +h3, .uk-h3 { + font-size: $base-h3-font-size; + line-height: $base-h3-line-height; + @if(mixin-exists(hook-base-h3)) {@include hook-base-h3();} +} + +h4, .uk-h4 { + font-size: $base-h4-font-size; + line-height: $base-h4-line-height; + @if(mixin-exists(hook-base-h4)) {@include hook-base-h4();} +} + +h5, .uk-h5 { + font-size: $base-h5-font-size; + line-height: $base-h5-line-height; + @if(mixin-exists(hook-base-h5)) {@include hook-base-h5();} +} + +h6, .uk-h6 { + font-size: $base-h6-font-size; + line-height: $base-h6-line-height; + @if(mixin-exists(hook-base-h6)) {@include hook-base-h6();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + h1, .uk-h1 { font-size: $base-h1-font-size-m; } + h2, .uk-h2 { font-size: $base-h2-font-size-m; } + +} + + +/* Lists + ========================================================================== */ + +ul, +ol { padding-left: $base-list-padding-left; } + +/* + * Reset margin for nested lists + */ + +ul > li > ul, +ul > li > ol, +ol > li > ol, +ol > li > ul { margin: 0; } + + +/* Description lists + ========================================================================== */ + +dt { font-weight: bold; } +dd { margin-left: 0; } + + +/* Horizontal rules + ========================================================================== */ + +/* + * 1. Add the correct box sizing and height in Firefox. + * 2. Show the overflow in Edge and IE. + * 3. Add the correct text-align in Edge and IE. + * 4. Style + */ + +hr, .uk-hr { + /* 1 */ + box-sizing: content-box; + height: 0; + /* 2 */ + overflow: visible; + /* 3 */ + text-align: inherit; + /* 4 */ + margin: 0 0 $base-hr-margin-vertical 0; + border: 0; + border-top: $base-hr-border-width solid $base-hr-border; + @if(mixin-exists(hook-base-hr)) {@include hook-base-hr();} +} + +/* Add margin if adjacent element */ +* + hr, +* + .uk-hr { margin-top: $base-hr-margin-vertical } + + +/* Address + ========================================================================== */ + +address { font-style: normal; } + + +/* Blockquotes + ========================================================================== */ + +blockquote { + margin: 0 0 $base-blockquote-margin-vertical 0; + font-size: $base-blockquote-font-size; + line-height: $base-blockquote-line-height; + font-style: $base-blockquote-font-style; + @if(mixin-exists(hook-base-blockquote)) {@include hook-base-blockquote();} +} + +/* Add margin if adjacent element */ +* + blockquote { margin-top: $base-blockquote-margin-vertical; } + +/* + * Content + */ + +blockquote p:last-of-type { margin-bottom: 0; } + +blockquote footer { + margin-top: $base-blockquote-footer-margin-top; + font-size: $base-blockquote-footer-font-size; + line-height: $base-blockquote-footer-line-height; + @if(mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();} +} + + +/* Preformatted text + ========================================================================== */ + +/* + * 1. Contain overflow in all browsers. + */ + +pre { + font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family; + color: $base-pre-color; + -moz-tab-size: 4; + tab-size: 4; + /* 1 */ + overflow: auto; + @if(mixin-exists(hook-base-pre)) {@include hook-base-pre();} +} + +pre code { font-family: $base-pre-font-family; } + + +/* Selection pseudo-element + ========================================================================== */ + +::-moz-selection { + background: $base-selection-background; + color: $base-selection-color; + text-shadow: none; +} + +::selection { + background: $base-selection-background; + color: $base-selection-color; + text-shadow: none; +} + + +/* HTML5 elements + ========================================================================== */ + +/* + * 1. Add the correct display in Edge, IE 10+, and Firefox. + * 2. Add the correct display in IE. + */ + +details, /* 1 */ +main { /* 2 */ + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { display: list-item; } + +/* + * Add the correct display in IE. + */ + +template { display: none; } + + +/* Iframe + ========================================================================== */ + +iframe { border: 0; } + + +/* Prevent the 300ms delay for touchscreen interactions + ========================================================================== */ + +/* + * Most browsers prevent the 300ms delay automatically for sites that use the `width=device-width` property. + * For Safari on iOS 9.3+, IE 11 and Edge on desktops and IE 11 on Windows Phone 8.1 it must be applied manually. + */ + +a, +area, +button, +input, +label, +select, +summary, +textarea { touch-action: manipulation; } + + +/* Pass media breakpoints to JS + ========================================================================== */ + +/* + * Breakpoints + */ + +.var-media-s::before { content: '#{$breakpoint-small}'; } +.var-media-m::before { content: '#{$breakpoint-medium}'; } +.var-media-l::before { content: '#{$breakpoint-large}'; } +.var-media-xl::before { content: '#{$breakpoint-xlarge}'; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-base-misc)) {@include hook-base-misc();} + +// @mixin hook-base-body(){} +// @mixin hook-base-link(){} +// @mixin hook-base-link-hover(){} +// @mixin hook-base-code(){} +// @mixin hook-base-heading(){} +// @mixin hook-base-h1(){} +// @mixin hook-base-h2(){} +// @mixin hook-base-h3(){} +// @mixin hook-base-h4(){} +// @mixin hook-base-h5(){} +// @mixin hook-base-h6(){} +// @mixin hook-base-hr(){} +// @mixin hook-base-blockquote(){} +// @mixin hook-base-blockquote-footer(){} +// @mixin hook-base-pre(){} +// @mixin hook-base-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-base-color: $inverse-global-color !default; +$inverse-base-link-color: $inverse-global-emphasis-color !default; +$inverse-base-link-hover-color: $inverse-global-emphasis-color !default; +$inverse-base-code-color: $inverse-global-color !default; +$inverse-base-em-color: $inverse-global-emphasis-color !default; +$inverse-base-heading-color: $inverse-global-emphasis-color !default; +$inverse-base-hr-border: $inverse-global-border !default; + + + +// @mixin hook-inverse-base-link(){} +// @mixin hook-inverse-base-link-hover(){} +// @mixin hook-inverse-base-code(){} +// @mixin hook-inverse-base-heading(){} +// @mixin hook-inverse-base-h1(){} +// @mixin hook-inverse-base-h2(){} +// @mixin hook-inverse-base-h3(){} +// @mixin hook-inverse-base-h4(){} +// @mixin hook-inverse-base-h5(){} +// @mixin hook-inverse-base-h6(){} +// @mixin hook-inverse-base-blockquote(){} +// @mixin hook-inverse-base-blockquote-footer(){} +// @mixin hook-inverse-base-hr(){} diff --git a/scss/uikit/components/breadcrumb.scss b/scss/uikit/components/breadcrumb.scss new file mode 100644 index 00000000..1f4ca502 --- /dev/null +++ b/scss/uikit/components/breadcrumb.scss @@ -0,0 +1,122 @@ +// Name: Breadcrumb +// Description: Component to create a breadcrumb navigation +// +// Component: `uk-breadcrumb` +// +// States: `uk-disabled` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$breadcrumb-item-font-size: $global-small-font-size !default; +$breadcrumb-item-color: $global-muted-color !default; +$breadcrumb-item-hover-color: $global-color !default; +$breadcrumb-item-hover-text-decoration: none !default; +$breadcrumb-item-active-color: $global-color !default; + +$breadcrumb-divider: "/" !default; +$breadcrumb-divider-margin-horizontal: 20px !default; +$breadcrumb-divider-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Breadcrumb + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + */ + +.uk-breadcrumb { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();} +} + +/* + * Space is allocated solely based on content dimensions: 0 0 auto + */ + +.uk-breadcrumb > * { flex: none; } + + +/* Items + ========================================================================== */ + +.uk-breadcrumb > * > * { + display: inline-block; + font-size: $breadcrumb-item-font-size; + color: $breadcrumb-item-color; + @if(mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();} +} + +/* Hover + Focus */ +.uk-breadcrumb > * > :hover, +.uk-breadcrumb > * > :focus { + color: $breadcrumb-item-hover-color; + text-decoration: $breadcrumb-item-hover-text-decoration; + @if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();} +} + +/* Disabled */ +.uk-breadcrumb > .uk-disabled > * { + @if(mixin-exists(hook-breadcrumb-item-disabled)) {@include hook-breadcrumb-item-disabled();} +} + +/* Active */ +.uk-breadcrumb > :last-child > * { + color: $breadcrumb-item-active-color; + @if(mixin-exists(hook-breadcrumb-item-active)) {@include hook-breadcrumb-item-active();} +} + +/* + * Divider + * `nth-child` makes it also work without JS if it's only one row + */ + +.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { + content: $breadcrumb-divider; + display: inline-block; + margin: 0 $breadcrumb-divider-margin-horizontal; + color: $breadcrumb-divider-color; + @if(mixin-exists(hook-breadcrumb-divider)) {@include hook-breadcrumb-divider();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-breadcrumb-misc)) {@include hook-breadcrumb-misc();} + +// @mixin hook-breadcrumb(){} +// @mixin hook-breadcrumb-item(){} +// @mixin hook-breadcrumb-item-hover(){} +// @mixin hook-breadcrumb-item-disabled(){} +// @mixin hook-breadcrumb-item-active(){} +// @mixin hook-breadcrumb-divider(){} +// @mixin hook-breadcrumb-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-breadcrumb-item-color: $inverse-global-muted-color !default; +$inverse-breadcrumb-item-hover-color: $inverse-global-color !default; +$inverse-breadcrumb-item-active-color: $inverse-global-color !default; +$inverse-breadcrumb-divider-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-breadcrumb-item(){} +// @mixin hook-inverse-breadcrumb-item-hover(){} +// @mixin hook-inverse-breadcrumb-item-disabled(){} +// @mixin hook-inverse-breadcrumb-item-active(){} +// @mixin hook-inverse-breadcrumb-divider(){} diff --git a/scss/uikit/components/button.scss b/scss/uikit/components/button.scss new file mode 100644 index 00000000..f65e1c22 --- /dev/null +++ b/scss/uikit/components/button.scss @@ -0,0 +1,451 @@ +// Name: Button +// Description: Styles for buttons +// +// Component: `uk-button` +// +// Sub-objects: `uk-button-group` +// +// Modifiers: `uk-button-default` +// `uk-button-primary` +// `uk-button-secondary` +// `uk-button-danger` +// `uk-button-text` +// `uk-button-link` +// `uk-button-small` +// `uk-button-large` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$button-line-height: $global-control-height !default; +$button-small-line-height: $global-control-small-height !default; +$button-large-line-height: $global-control-large-height !default; + +$button-font-size: $global-font-size !default; +$button-small-font-size: $global-small-font-size !default; +$button-large-font-size: $global-medium-font-size !default; + +$button-padding-horizontal: $global-gutter !default; +$button-small-padding-horizontal: $global-small-gutter !default; +$button-large-padding-horizontal: $global-medium-gutter !default; + +$button-default-background: $global-muted-background !default; +$button-default-color: $global-emphasis-color !default; +$button-default-hover-background: darken($button-default-background, 5%) !default; +$button-default-hover-color: $global-emphasis-color !default; +$button-default-active-background: darken($button-default-background, 10%) !default; +$button-default-active-color: $global-emphasis-color !default; + +$button-primary-background: $global-primary-background !default; +$button-primary-color: $global-inverse-color !default; +$button-primary-hover-background: darken($button-primary-background, 5%) !default; +$button-primary-hover-color: $global-inverse-color !default; +$button-primary-active-background: darken($button-primary-background, 10%) !default; +$button-primary-active-color: $global-inverse-color !default; + +$button-secondary-background: $global-secondary-background !default; +$button-secondary-color: $global-inverse-color !default; +$button-secondary-hover-background: darken($button-secondary-background, 5%) !default; +$button-secondary-hover-color: $global-inverse-color !default; +$button-secondary-active-background: darken($button-secondary-background, 10%) !default; +$button-secondary-active-color: $global-inverse-color !default; + +$button-danger-background: $global-danger-background !default; +$button-danger-color: $global-inverse-color !default; +$button-danger-hover-background: darken($button-danger-background, 5%) !default; +$button-danger-hover-color: $global-inverse-color !default; +$button-danger-active-background: darken($button-danger-background, 10%) !default; +$button-danger-active-color: $global-inverse-color !default; + +$button-disabled-background: $global-muted-background !default; +$button-disabled-color: $global-muted-color !default; + +$button-text-line-height: $global-line-height !default; +$button-text-color: $global-muted-color !default; +$button-text-hover-color: $global-color !default; +$button-text-disabled-color: $global-muted-color !default; + +$button-link-line-height: $global-line-height !default; +$button-link-color: $global-link-color !default; +$button-link-hover-color: $global-link-hover-color !default; +$button-link-hover-text-decoration: underline !default; +$button-link-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Button + ========================================================================== */ + +/* + * 1. Remove margins in Chrome, Safari and Opera. + * 2. Remove borders for `button`. + * 3. Remove border-radius in Chrome. + * 4. Address `overflow` set to `hidden` in IE. + * 5. Correct `font` properties and `color` not being inherited for `button`. + * 6. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 7. Style + * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements. + * Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements. + * 9. Align text if button has a width + * 10. Required for `a`. + */ + +.uk-button { + /* 1 */ + margin: 0; + /* 2 */ + border: none; + /* 3 */ + border-radius: 0; + /* 4 */ + overflow: visible; + /* 5 */ + font: inherit; + color: inherit; + /* 6 */ + text-transform: none; + /* 7 */ + display: inline-block; + box-sizing: border-box; + padding: 0 $button-padding-horizontal; + vertical-align: middle; + font-size: $button-font-size; + /* 8 */ + line-height: $button-line-height; + /* 9 */ + text-align: center; + /* 10 */ + text-decoration: none; + @if(mixin-exists(hook-button)) {@include hook-button();} +} + +.uk-button:not(:disabled) { cursor: pointer; } + +/* + * Remove the inner border and padding in Firefox. + */ + +.uk-button::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* Hover */ +.uk-button:hover { + /* 8 */ + text-decoration: none; + @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();} +} + +/* Focus */ +.uk-button:focus { + outline: none; + @if(mixin-exists(hook-button-focus)) {@include hook-button-focus();} +} + +/* OnClick + Active */ +.uk-button:active, +.uk-button.uk-active { + @if(mixin-exists(hook-button-active)) {@include hook-button-active();} +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-button-default { + background-color: $button-default-background; + color: $button-default-color; + @if(mixin-exists(hook-button-default)) {@include hook-button-default();} +} + +/* Hover + Focus */ +.uk-button-default:hover, +.uk-button-default:focus { + background-color: $button-default-hover-background; + color: $button-default-hover-color; + @if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();} +} + +/* OnClick + Active */ +.uk-button-default:active, +.uk-button-default.uk-active { + background-color: $button-default-active-background; + color: $button-default-active-color; + @if(mixin-exists(hook-button-default-active)) {@include hook-button-default-active();} +} + +/* + * Primary + */ + +.uk-button-primary { + background-color: $button-primary-background; + color: $button-primary-color; + @if(mixin-exists(hook-button-primary)) {@include hook-button-primary();} +} + +/* Hover + Focus */ +.uk-button-primary:hover, +.uk-button-primary:focus { + background-color: $button-primary-hover-background; + color: $button-primary-hover-color; + @if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();} +} + +/* OnClick + Active */ +.uk-button-primary:active, +.uk-button-primary.uk-active { + background-color: $button-primary-active-background; + color: $button-primary-active-color; + @if(mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();} +} + +/* + * Secondary + */ + +.uk-button-secondary { + background-color: $button-secondary-background; + color: $button-secondary-color; + @if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();} +} + +/* Hover + Focus */ +.uk-button-secondary:hover, +.uk-button-secondary:focus { + background-color: $button-secondary-hover-background; + color: $button-secondary-hover-color; + @if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();} +} + +/* OnClick + Active */ +.uk-button-secondary:active, +.uk-button-secondary.uk-active { + background-color: $button-secondary-active-background; + color: $button-secondary-active-color; + @if(mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();} +} + +/* + * Danger + */ + +.uk-button-danger { + background-color: $button-danger-background; + color: $button-danger-color; + @if(mixin-exists(hook-button-danger)) {@include hook-button-danger();} +} + +/* Hover + Focus */ +.uk-button-danger:hover, +.uk-button-danger:focus { + background-color: $button-danger-hover-background; + color: $button-danger-hover-color; + @if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();} +} + +/* OnClick + Active */ +.uk-button-danger:active, +.uk-button-danger.uk-active { + background-color: $button-danger-active-background; + color: $button-danger-active-color; + @if(mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();} +} + +/* + * Disabled + * The same for all style modifiers + */ + +.uk-button-default:disabled, +.uk-button-primary:disabled, +.uk-button-secondary:disabled, +.uk-button-danger:disabled { + background-color: $button-disabled-background; + color: $button-disabled-color; + @if(mixin-exists(hook-button-disabled)) {@include hook-button-disabled();} +} + + +/* Size modifiers + ========================================================================== */ + +.uk-button-small { + padding: 0 $button-small-padding-horizontal; + line-height: $button-small-line-height; + font-size: $button-small-font-size; + @if(mixin-exists(hook-button-small)) {@include hook-button-small();} +} + +.uk-button-large { + padding: 0 $button-large-padding-horizontal; + line-height: $button-large-line-height; + font-size: $button-large-font-size; + @if(mixin-exists(hook-button-large)) {@include hook-button-large();} +} + + +/* Text modifiers + ========================================================================== */ + +/* + * Text + * 1. Reset + * 2. Style + */ + +.uk-button-text { + /* 1 */ + padding: 0; + line-height: $button-text-line-height; + background: none; + /* 2 */ + color: $button-text-color; + @if(mixin-exists(hook-button-text)) {@include hook-button-text();} +} + +/* Hover + Focus */ +.uk-button-text:hover, +.uk-button-text:focus { + color: $button-text-hover-color; + @if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();} +} + +/* Disabled */ +.uk-button-text:disabled { + color: $button-text-disabled-color; + @if(mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();} +} + +/* + * Link + * 1. Reset + * 2. Style + */ + +.uk-button-link { + /* 1 */ + padding: 0; + line-height: $button-link-line-height; + background: none; + /* 2 */ + color: $button-link-color; + @if(mixin-exists(hook-button-link)) {@include hook-button-link();} +} + +/* Hover + Focus */ +.uk-button-link:hover, +.uk-button-link:focus { + color: $button-link-hover-color; + text-decoration: $button-link-hover-text-decoration; +} + +/* Disabled */ +.uk-button-link:disabled { + color: $button-link-disabled-color; + text-decoration: none; +} + + +/* Group + ========================================================================== */ + +/* + * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements + * 2. Behave like button + * 3. Create position context + */ + +.uk-button-group { + /* 1 */ + display: inline-flex; + /* 2 */ + vertical-align: middle; + /* 3 */ + position: relative; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-button-misc)) {@include hook-button-misc();} + +// @mixin hook-button(){} +// @mixin hook-button-hover(){} +// @mixin hook-button-focus(){} +// @mixin hook-button-active(){} +// @mixin hook-button-default(){} +// @mixin hook-button-default-hover(){} +// @mixin hook-button-default-active(){} +// @mixin hook-button-primary(){} +// @mixin hook-button-primary-hover(){} +// @mixin hook-button-primary-active(){} +// @mixin hook-button-secondary(){} +// @mixin hook-button-secondary-hover(){} +// @mixin hook-button-secondary-active(){} +// @mixin hook-button-danger(){} +// @mixin hook-button-danger-hover(){} +// @mixin hook-button-danger-active(){} +// @mixin hook-button-disabled(){} +// @mixin hook-button-small(){} +// @mixin hook-button-large(){} +// @mixin hook-button-text(){} +// @mixin hook-button-text-hover(){} +// @mixin hook-button-text-disabled(){} +// @mixin hook-button-link(){} +// @mixin hook-button-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-button-default-background: $inverse-global-primary-background !default; +$inverse-button-default-color: $inverse-global-inverse-color !default; +$inverse-button-default-hover-background: darken($inverse-button-default-background, 5%) !default; +$inverse-button-default-hover-color: $inverse-global-inverse-color !default; +$inverse-button-default-active-background: darken($inverse-button-default-background, 10%) !default; +$inverse-button-default-active-color: $inverse-global-inverse-color !default; +$inverse-button-primary-background: $inverse-global-primary-background !default; +$inverse-button-primary-color: $inverse-global-inverse-color !default; +$inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%) !default; +$inverse-button-primary-hover-color: $inverse-global-inverse-color !default; +$inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%) !default; +$inverse-button-primary-active-color: $inverse-global-inverse-color !default; +$inverse-button-secondary-background: $inverse-global-primary-background !default; +$inverse-button-secondary-color: $inverse-global-inverse-color !default; +$inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%) !default; +$inverse-button-secondary-hover-color: $inverse-global-inverse-color !default; +$inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%) !default; +$inverse-button-secondary-active-color: $inverse-global-inverse-color !default; +$inverse-button-text-color: $inverse-global-muted-color !default; +$inverse-button-text-hover-color: $inverse-global-color !default; +$inverse-button-text-disabled-color: $inverse-global-muted-color !default; +$inverse-button-link-color: $inverse-global-muted-color !default; +$inverse-button-link-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-button-default(){} +// @mixin hook-inverse-button-default-hover(){} +// @mixin hook-inverse-button-default-active(){} +// @mixin hook-inverse-button-primary(){} +// @mixin hook-inverse-button-primary-hover(){} +// @mixin hook-inverse-button-primary-active(){} +// @mixin hook-inverse-button-secondary(){} +// @mixin hook-inverse-button-secondary-hover(){} +// @mixin hook-inverse-button-secondary-active(){} +// @mixin hook-inverse-button-text(){} +// @mixin hook-inverse-button-text-hover(){} +// @mixin hook-inverse-button-text-disabled(){} +// @mixin hook-inverse-button-link(){} diff --git a/scss/uikit/components/card.scss b/scss/uikit/components/card.scss new file mode 100644 index 00000000..e332a03f --- /dev/null +++ b/scss/uikit/components/card.scss @@ -0,0 +1,363 @@ +// Name: Card +// Description: Component to create boxed content containers +// +// Component: `uk-card` +// +// Sub-objects: `uk-card-body` +// `uk-card-header` +// `uk-card-footer` +// `uk-card-media-*` +// `uk-card-title` +// `uk-card-badge` +// +// Modifiers: `uk-card-hover` +// `uk-card-default` +// `uk-card-primary` +// `uk-card-secondary` +// `uk-card-small` +// `uk-card-large` +// +// Uses: `uk-grid-stack` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$card-body-padding-horizontal: $global-gutter !default; +$card-body-padding-vertical: $global-gutter !default; + +$card-body-padding-horizontal-l: $global-medium-gutter !default; +$card-body-padding-vertical-l: $global-medium-gutter !default; + +$card-header-padding-horizontal: $global-gutter !default; +$card-header-padding-vertical: round($global-gutter / 2) !default; + +$card-header-padding-horizontal-l: $global-medium-gutter !default; +$card-header-padding-vertical-l: round($global-medium-gutter / 2) !default; + +$card-footer-padding-horizontal: $global-gutter !default; +$card-footer-padding-vertical: ($global-gutter / 2) !default; + +$card-footer-padding-horizontal-l: $global-medium-gutter !default; +$card-footer-padding-vertical-l: round($global-medium-gutter / 2) !default; + +$card-title-font-size: $global-large-font-size !default; +$card-title-line-height: 1.4 !default; + +$card-badge-top: $global-gutter !default; +$card-badge-right: $card-badge-top !default; + +$card-hover-background: $global-muted-background !default; + +$card-default-background: $global-muted-background !default; +$card-default-color: $global-color !default; +$card-default-title-color: $global-emphasis-color !default; +$card-default-hover-background: darken($card-default-background, 5%) !default; + +$card-primary-background: $global-primary-background !default; +$card-primary-color: $global-inverse-color !default; +$card-primary-title-color: $card-primary-color !default; +$card-primary-hover-background: darken($card-primary-background, 5%) !default; +$card-primary-color-mode: light !default; + +$card-secondary-background: $global-secondary-background !default; +$card-secondary-color: $global-inverse-color !default; +$card-secondary-title-color: $card-secondary-color !default; +$card-secondary-hover-background: darken($card-secondary-background, 5%) !default; +$card-secondary-color-mode: light !default; + +$card-small-body-padding-horizontal: $global-margin !default; +$card-small-body-padding-vertical: $global-margin !default; +$card-small-header-padding-horizontal: $global-margin !default; +$card-small-header-padding-vertical: round($global-margin / 1.5) !default; +$card-small-footer-padding-horizontal: $global-margin !default; +$card-small-footer-padding-vertical: round($global-margin / 1.5) !default; + +$card-large-body-padding-horizontal-l: $global-large-gutter !default; +$card-large-body-padding-vertical-l: $global-large-gutter !default; +$card-large-header-padding-horizontal-l: $global-large-gutter !default; +$card-large-header-padding-vertical-l: round($global-large-gutter / 2) !default; +$card-large-footer-padding-horizontal-l: $global-large-gutter !default; +$card-large-footer-padding-vertical-l: round($global-large-gutter / 2) !default; + + +/* ======================================================================== + Component: Card + ========================================================================== */ + +.uk-card { + position: relative; + box-sizing: border-box; + @if(mixin-exists(hook-card)) {@include hook-card();} +} + + +/* Sections + ========================================================================== */ + +.uk-card-body { + padding: $card-body-padding-vertical $card-body-padding-horizontal; + @if(mixin-exists(hook-card-body)) {@include hook-card-body();} +} + +.uk-card-header { + padding: $card-header-padding-vertical $card-header-padding-horizontal; + @if(mixin-exists(hook-card-header)) {@include hook-card-header();} +} + +.uk-card-footer { + padding: $card-footer-padding-vertical $card-footer-padding-horizontal; + @if(mixin-exists(hook-card-footer)) {@include hook-card-footer();} +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-card-body { padding: $card-body-padding-vertical-l $card-body-padding-horizontal-l; } + + .uk-card-header { padding: $card-header-padding-vertical-l $card-header-padding-horizontal-l; } + + .uk-card-footer { padding: $card-footer-padding-vertical-l $card-footer-padding-horizontal-l; } + +} + +/* + * Micro clearfix + */ + +.uk-card-body::before, +.uk-card-body::after, +.uk-card-header::before, +.uk-card-header::after, +.uk-card-footer::before, +.uk-card-footer::after { + content: ""; + display: table; +} + +.uk-card-body::after, +.uk-card-header::after, +.uk-card-footer::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-card-body > :last-child, +.uk-card-header > :last-child, +.uk-card-footer > :last-child { margin-bottom: 0; } + + +/* Media + ========================================================================== */ + +/* + * Reserved alignment modifier to style the media element, e.g. with `border-radius` + * Implemented by the theme + */ + +[class*='uk-card-media'] { + @if(mixin-exists(hook-card-media)) {@include hook-card-media();} +} + +.uk-card-media-top, +.uk-grid-stack > .uk-card-media-left, +.uk-grid-stack > .uk-card-media-right { + @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();} +} + +.uk-card-media-bottom { + @if(mixin-exists(hook-card-media-bottom)) {@include hook-card-media-bottom();} +} + +:not(.uk-grid-stack) > .uk-card-media-left { + @if(mixin-exists(hook-card-media-left)) {@include hook-card-media-left();} +} + +:not(.uk-grid-stack) > .uk-card-media-right { + @if(mixin-exists(hook-card-media-right)) {@include hook-card-media-right();} +} + + +/* Title + ========================================================================== */ + +.uk-card-title { + font-size: $card-title-font-size; + line-height: $card-title-line-height; + @if(mixin-exists(hook-card-title)) {@include hook-card-title();} +} + + +/* Badge + ========================================================================== */ + +.uk-card-badge { + position: absolute; + top: $card-badge-top; + right: $card-badge-right; + z-index: 1; + @if(mixin-exists(hook-card-badge)) {@include hook-card-badge();} +} + +/* + * Remove margin from adjacent element + */ + +.uk-card-badge:first-child + * { margin-top: 0; } + + +/* Hover modifier + ========================================================================== */ + +.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover { + background: $card-hover-background; + @if(mixin-exists(hook-card-hover)) {@include hook-card-hover();} +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + * Note: Header and Footer are only implemented for the default style + */ + +.uk-card-default { + background: $card-default-background; + color: $card-default-color; + @if(mixin-exists(hook-card-default)) {@include hook-card-default();} +} + +.uk-card-default .uk-card-title { + color: $card-default-title-color; + @if(mixin-exists(hook-card-default-title)) {@include hook-card-default-title();} +} + +.uk-card-default.uk-card-hover:hover { + background-color: $card-default-hover-background; + @if(mixin-exists(hook-card-default-hover)) {@include hook-card-default-hover();} +} + +.uk-card-default .uk-card-header { + @if(mixin-exists(hook-card-default-header)) {@include hook-card-default-header();} +} + +.uk-card-default .uk-card-footer { + @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();} +} + +/* + * Primary + */ + +.uk-card-primary { + background: $card-primary-background; + color: $card-primary-color; + @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();} +} + +.uk-card-primary .uk-card-title { + color: $card-primary-title-color; + @if(mixin-exists(hook-card-primary-title)) {@include hook-card-primary-title();} +} + +.uk-card-primary.uk-card-hover:hover { + background-color: $card-primary-hover-background; + @if(mixin-exists(hook-card-primary-hover)) {@include hook-card-primary-hover();} +} + +// Color Mode +@if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} } +@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} } +@if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} } +@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} } + +/* + * Secondary + */ + +.uk-card-secondary { + background: $card-secondary-background; + color: $card-secondary-color; + @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();} +} + +.uk-card-secondary .uk-card-title { + color: $card-secondary-title-color; + @if(mixin-exists(hook-card-secondary-title)) {@include hook-card-secondary-title();} +} + +.uk-card-secondary.uk-card-hover:hover { + background-color: $card-secondary-hover-background; + @if(mixin-exists(hook-card-secondary-hover)) {@include hook-card-secondary-hover();} +} + +// Color Mode +@if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} } +@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} } +@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} } +@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} } + + +/* Size modifier + ========================================================================== */ + +/* + * Small + */ + +.uk-card-small.uk-card-body, +.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; } + +.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; } +.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; } + +/* + * Large + */ + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-card-large.uk-card-body, + .uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; } + + .uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; } + .uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-card-misc)) {@include hook-card-misc();} + +// @mixin hook-card(){} +// @mixin hook-card-body(){} +// @mixin hook-card-header(){} +// @mixin hook-card-footer(){} +// @mixin hook-card-media(){} +// @mixin hook-card-media-top(){} +// @mixin hook-card-media-bottom(){} +// @mixin hook-card-media-left(){} +// @mixin hook-card-media-right(){} +// @mixin hook-card-title(){} +// @mixin hook-card-badge(){} +// @mixin hook-card-hover(){} +// @mixin hook-card-default(){} +// @mixin hook-card-default-title(){} +// @mixin hook-card-default-hover(){} +// @mixin hook-card-default-header(){} +// @mixin hook-card-default-footer(){} +// @mixin hook-card-primary(){} +// @mixin hook-card-primary-title(){} +// @mixin hook-card-primary-hover(){} +// @mixin hook-card-secondary(){} +// @mixin hook-card-secondary-title(){} +// @mixin hook-card-secondary-hover(){} +// @mixin hook-card-misc(){} diff --git a/scss/uikit/components/close.scss b/scss/uikit/components/close.scss new file mode 100644 index 00000000..32e27756 --- /dev/null +++ b/scss/uikit/components/close.scss @@ -0,0 +1,57 @@ +// Name: Close +// Description: Component to create a close button +// +// Component: `uk-close` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$close-color: $global-muted-color !default; +$close-hover-color: $global-color !default; + + +/* ======================================================================== + Component: Close + ========================================================================== */ + +/* + * Adopts `uk-icon` + */ + +.uk-close { + color: $close-color; + @if(mixin-exists(hook-close)) {@include hook-close();} +} + +/* Hover + Focus */ +.uk-close:hover, +.uk-close:focus { + color: $close-hover-color; + outline: none; + @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-close-misc)) {@include hook-close-misc();} + +// @mixin hook-close(){} +// @mixin hook-close-hover(){} +// @mixin hook-close-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-close-color: $inverse-global-muted-color !default; +$inverse-close-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-close(){} +// @mixin hook-inverse-close-hover(){} diff --git a/scss/uikit/components/column.scss b/scss/uikit/components/column.scss new file mode 100644 index 00000000..54bae26e --- /dev/null +++ b/scss/uikit/components/column.scss @@ -0,0 +1,138 @@ +// Name: Column +// Description: Utilities for text columns +// +// Component: `uk-column-*` +// +// Sub-objects: `uk-column-span` +// +// Modifiers: `uk-column-divider` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$column-gutter: $global-gutter !default; +$column-gutter-l: $global-medium-gutter !default; + +$column-divider-rule-color: $global-border !default; +$column-divider-rule-width: 1px !default; + + +/* ======================================================================== + Component: Column + ========================================================================== */ + +[class*='uk-column-'] { column-gap: $column-gutter; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + [class*='uk-column-'] { column-gap: $column-gutter-l; } + +} + +/* + * Fix image 1px line wrapping into the next column in Chrome + */ + +[class*='uk-column-'] img { transform: translate3d(0,0,0); } + + +/* Divider + ========================================================================== */ + +/* + * 1. Double the column gap + */ + +.uk-column-divider { + column-rule: $column-divider-rule-width solid $column-divider-rule-color; + /* 1 */ + column-gap: ($column-gutter * 2); +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-column-divider { + column-gap: ($column-gutter-l * 2); + } + +} + + +/* Width modifiers + ========================================================================== */ + +.uk-column-1-2 { column-count: 2;} +.uk-column-1-3 { column-count: 3; } +.uk-column-1-4 { column-count: 4; } +.uk-column-1-5 { column-count: 5; } +.uk-column-1-6 { column-count: 6; } + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-column-1-2\@s { column-count: 2; } + .uk-column-1-3\@s { column-count: 3; } + .uk-column-1-4\@s { column-count: 4; } + .uk-column-1-5\@s { column-count: 5; } + .uk-column-1-6\@s { column-count: 6; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-column-1-2\@m { column-count: 2; } + .uk-column-1-3\@m { column-count: 3; } + .uk-column-1-4\@m { column-count: 4; } + .uk-column-1-5\@m { column-count: 5; } + .uk-column-1-6\@m { column-count: 6; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-column-1-2\@l { column-count: 2; } + .uk-column-1-3\@l { column-count: 3; } + .uk-column-1-4\@l { column-count: 4; } + .uk-column-1-5\@l { column-count: 5; } + .uk-column-1-6\@l { column-count: 6; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-column-1-2\@xl { column-count: 2; } + .uk-column-1-3\@xl { column-count: 3; } + .uk-column-1-4\@xl { column-count: 4; } + .uk-column-1-5\@xl { column-count: 5; } + .uk-column-1-6\@xl { column-count: 6; } + +} + +/* Make element span across all columns + * Does not work in Firefox yet + ========================================================================== */ + +.uk-column-span { column-span: all; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-column-misc)) {@include hook-column-misc();} + +// @mixin hook-column-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-column-divider-rule-color: $inverse-global-border !default; + diff --git a/scss/uikit/components/comment.scss b/scss/uikit/components/comment.scss new file mode 100644 index 00000000..54631d61 --- /dev/null +++ b/scss/uikit/components/comment.scss @@ -0,0 +1,173 @@ +// Name: Comment +// Description: Component to create nested comments +// +// Component: `uk-comment` +// +// Sub-objects: `uk-comment-body` +// `uk-comment-header` +// `uk-comment-title` +// `uk-comment-meta` +// `uk-comment-avatar` +// `uk-comment-list` +// +// Modifier: `uk-comment-primary` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$comment-header-margin-bottom: $global-margin !default; + +$comment-title-font-size: $global-medium-font-size !default; +$comment-title-line-height: 1.4 !default; + +$comment-meta-font-size: $global-small-font-size !default; +$comment-meta-line-height: 1.4 !default; +$comment-meta-color: $global-muted-color !default; + +$comment-list-margin-top: $global-large-margin !default; +$comment-list-padding-left: 30px !default; +$comment-list-padding-left-m: 100px !default; + + +/* ======================================================================== + Component: Comment + ========================================================================== */ + +.uk-comment { + @if(mixin-exists(hook-comment)) {@include hook-comment();} +} + + +/* Sections + ========================================================================== */ + +.uk-comment-body { + overflow-wrap: break-word; + word-wrap: break-word; + @if(mixin-exists(hook-comment-body)) {@include hook-comment-body();} +} + +.uk-comment-header { + margin-bottom: $comment-header-margin-bottom; + @if(mixin-exists(hook-comment-header)) {@include hook-comment-header();} +} + +/* + * Micro clearfix + */ + +.uk-comment-body::before, +.uk-comment-body::after, +.uk-comment-header::before, +.uk-comment-header::after { + content: ""; + display: table; +} + +.uk-comment-body::after, +.uk-comment-header::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-comment-body > :last-child, +.uk-comment-header > :last-child { margin-bottom: 0; } + + +/* Title + ========================================================================== */ + +.uk-comment-title { + font-size: $comment-title-font-size; + line-height: $comment-title-line-height; + @if(mixin-exists(hook-comment-title)) {@include hook-comment-title();} +} + + +/* Meta + ========================================================================== */ + +.uk-comment-meta { + font-size: $comment-meta-font-size; + line-height: $comment-meta-line-height; + color: $comment-meta-color; + @if(mixin-exists(hook-comment-meta)) {@include hook-comment-meta();} +} + + +/* Avatar + ========================================================================== */ + +.uk-comment-avatar { + @if(mixin-exists(hook-comment-avatar)) {@include hook-comment-avatar();} +} + + +/* List + ========================================================================== */ + +.uk-comment-list { + padding: 0; + list-style: none; +} + +/* Adjacent siblings */ +.uk-comment-list > :nth-child(n+2) { + margin-top: $comment-list-margin-top; + @if(mixin-exists(hook-comment-list-adjacent)) {@include hook-comment-list-adjacent();} +} + +/* + * Sublists + * Note: General sibling selector allows reply block between comment and sublist + */ + +.uk-comment-list .uk-comment ~ ul { + margin: $comment-list-margin-top 0 0 0; + padding-left: $comment-list-padding-left; + list-style: none; + @if(mixin-exists(hook-comment-list-sub)) {@include hook-comment-list-sub();} +} + +/* Tablet and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-comment-list .uk-comment ~ ul { padding-left: $comment-list-padding-left-m; } + +} + +/* Adjacent siblings */ +.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) { + margin-top: $comment-list-margin-top; + @if(mixin-exists(hook-comment-list-sub-adjacent)) {@include hook-comment-list-sub-adjacent();} +} + + +/* Style modifier + ========================================================================== */ + +.uk-comment-primary { + @if(mixin-exists(hook-comment-primary)) {@include hook-comment-primary();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-comment-misc)) {@include hook-comment-misc();} + +// @mixin hook-comment(){} +// @mixin hook-comment-body(){} +// @mixin hook-comment-header(){} +// @mixin hook-comment-title(){} +// @mixin hook-comment-meta(){} +// @mixin hook-comment-avatar(){} +// @mixin hook-comment-list-adjacent(){} +// @mixin hook-comment-list-sub(){} +// @mixin hook-comment-list-sub-adjacent(){} +// @mixin hook-comment-primary(){} +// @mixin hook-comment-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/container.scss b/scss/uikit/components/container.scss new file mode 100644 index 00000000..c518d6d7 --- /dev/null +++ b/scss/uikit/components/container.scss @@ -0,0 +1,106 @@ +// 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` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$container-max-width: 1200px !default; +$container-small-max-width: 900px !default; +$container-large-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 { + box-sizing: content-box; /* 1 */ + 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; + } + +} + +/* + * Micro clearfix + */ + +.uk-container::before, +.uk-container::after { + content: ""; + display: table; +} + +.uk-container::after { clear: both; } + +/* + * 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-small { max-width: $container-small-max-width; } + +.uk-container-large { max-width: $container-large-max-width; } + +.uk-container-expand { max-width: none; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();} + +// @mixin hook-container-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/countdown.scss b/scss/uikit/components/countdown.scss new file mode 100644 index 00000000..3f53e70c --- /dev/null +++ b/scss/uikit/components/countdown.scss @@ -0,0 +1,126 @@ +// Name: Countdown +// Description: Component to create countdown timers +// +// Component: `uk-countdown` +// +// Sub-objects: `uk-countdown-number` +// `uk-countdown-separator` +// `uk-countdown-label` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$countdown-item-line-height: 70px !default; + +$countdown-number-font-size: 2rem !default; // 32px +$countdown-number-font-size-s: 4rem !default; // 64px +$countdown-number-font-size-m: 6rem !default; // 96px + +$countdown-separator-font-size: 1rem !default; // 16px +$countdown-separator-font-size-s: 2rem !default; // 32px +$countdown-separator-font-size-m: 3rem !default; // 48px + + +/* ======================================================================== + Component: Countdown + ========================================================================== */ + +.uk-countdown { + @if(mixin-exists(hook-countdown)) {@include hook-countdown();} +} + + +/* Item + ========================================================================== */ + +/* + * 1. Center numbers and separators vertically + */ + +.uk-countdown-number, +.uk-countdown-separator { + /* 1 */ + line-height: $countdown-item-line-height; + @if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();} +} + + +/* Number + ========================================================================== */ + +.uk-countdown-number { + font-size: $countdown-number-font-size; + @if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-countdown-number { font-size: $countdown-number-font-size-s; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-countdown-number { font-size: $countdown-number-font-size-m; } + +} + + +/* Separator + ========================================================================== */ + +.uk-countdown-separator { + font-size: $countdown-separator-font-size; + @if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-countdown-separator { font-size: $countdown-separator-font-size-s; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-countdown-separator { font-size: $countdown-separator-font-size-m; } + +} + + +/* Label + ========================================================================== */ + +.uk-countdown-label { + @if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();} + +// @mixin hook-countdown(){} +// @mixin hook-countdown-item(){} +// @mixin hook-countdown-number(){} +// @mixin hook-countdown-separator(){} +// @mixin hook-countdown-label(){} +// @mixin hook-countdown-misc(){} + + +// Inverse +// ======================================================================== + + + +// @mixin hook-inverse-countdown-item(){} +// @mixin hook-inverse-countdown-number(){} +// @mixin hook-inverse-countdown-separator(){} +// @mixin hook-inverse-countdown-label(){} diff --git a/scss/uikit/components/cover.scss b/scss/uikit/components/cover.scss new file mode 100644 index 00000000..b44a6847 --- /dev/null +++ b/scss/uikit/components/cover.scss @@ -0,0 +1,57 @@ +// Name: Cover +// Description: Utilities to let embedded content cover their container in a centered position +// +// Component: `uk-cover` +// +// Sub-object: `uk-cover-container` +// +// ======================================================================== + + +/* ======================================================================== + Component: Cover + ========================================================================== */ + +/* + * Works with iframes and embedded content + * 1. Reset responsiveness for embedded content + * 2. Center object + * Note: Percent values on the `top` property only works if this element + * is absolute positioned or if the container has a height + */ + +.uk-cover { + /* 1 */ + max-width: none; + /* 2 */ + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); +} + +iframe.uk-cover { pointer-events: none; } + + +/* Container + ========================================================================== */ + +/* + * 1. Parent container which clips resized object + * 2. Needed if the child is positioned absolute. See note above + */ + +.uk-cover-container { + /* 1 */ + overflow: hidden; + /* 2 */ + position: relative; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-cover-misc)) {@include hook-cover-misc();} + +// @mixin hook-cover-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/description-list.scss b/scss/uikit/components/description-list.scss new file mode 100644 index 00000000..6683286d --- /dev/null +++ b/scss/uikit/components/description-list.scss @@ -0,0 +1,71 @@ +// Name: Description list +// Description: Styles for description lists +// +// Component: `uk-description-list` +// +// Modifiers: `uk-description-list-divider` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$description-list-term-color: $global-emphasis-color !default; +$description-list-term-margin-top: $global-margin !default; + +$description-list-divider-term-margin-top: $global-margin !default; +$description-list-divider-term-border-width: $global-border-width !default; +$description-list-divider-term-border: $global-border !default; + + +/* ======================================================================== + Component: Description list + ========================================================================== */ + +/* + * Term + */ + +.uk-description-list > dt { + color: $description-list-term-color; + @if(mixin-exists(hook-description-list-term)) {@include hook-description-list-term();} +} + +.uk-description-list > dt:nth-child(n+2) { + margin-top: $description-list-term-margin-top; +} + +/* + * Description + */ + +.uk-description-list > dd { + @if(mixin-exists(hook-description-list-description)) {@include hook-description-list-description();} +} + + +/* Style modifier + ========================================================================== */ + +/* + * Line + */ + +.uk-description-list-divider > dt:nth-child(n+2) { + margin-top: $description-list-divider-term-margin-top; + padding-top: $description-list-divider-term-margin-top; + border-top: $description-list-divider-term-border-width solid $description-list-divider-term-border; + @if(mixin-exists(hook-description-list-divider-term)) {@include hook-description-list-divider-term();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-description-list-misc)) {@include hook-description-list-misc();} + +// @mixin hook-description-list-term(){} +// @mixin hook-description-list-description(){} +// @mixin hook-description-list-divider-term(){} +// @mixin hook-description-list-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/divider.scss b/scss/uikit/components/divider.scss new file mode 100644 index 00000000..b51708cf --- /dev/null +++ b/scss/uikit/components/divider.scss @@ -0,0 +1,129 @@ +// Name: Divider +// Description: Styles for dividers +// +// Component: `uk-divider-icon` +// `uk-divider-small` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$divider-margin-vertical: $global-margin !default; + +$divider-icon-width: 50px !default; +$divider-icon-height: 20px !default; +$divider-icon-color: $global-border !default; +$divider-icon-line-top: 50% !default; +$divider-icon-line-width: 100% !default; +$divider-icon-line-border-width: $global-border-width !default; +$divider-icon-line-border: $global-border !default; + +$internal-divider-icon-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; + +$divider-small-width: 100px !default; +$divider-small-border-width: $global-border-width !default; +$divider-small-border: $global-border !default; + + +/* ======================================================================== + Component: Divider + ========================================================================== */ + +/* + * 1. Reset default `hr` + * 2. Set margin if a `div` is used for semantical reason + */ + +[class*='uk-divider'] { + /* 1 */ + border: none; + /* 2 */ + margin-bottom: $divider-margin-vertical; +} + +/* Add margin if adjacent element */ +* + [class*='uk-divider'] { margin-top: $divider-margin-vertical; } + + +/* Icon + ========================================================================== */ + +.uk-divider-icon { + position: relative; + height: $divider-icon-height; + @include svg-fill($internal-divider-icon-image, "#000", $divider-icon-color); + background-repeat: no-repeat; + background-position: 50% 50%; + @if(mixin-exists(hook-divider-icon)) {@include hook-divider-icon();} +} + +.uk-divider-icon::before, +.uk-divider-icon::after { + content: ""; + position: absolute; + top: $divider-icon-line-top; + max-width: unquote('calc(50% - (#{$divider-icon-width} / 2))'); + border-bottom: $divider-icon-line-border-width solid $divider-icon-line-border; + @if(mixin-exists(hook-divider-icon-line)) {@include hook-divider-icon-line();} +} + +.uk-divider-icon::before { + right: unquote('calc(50% + (#{$divider-icon-width} / 2))'); + width: $divider-icon-line-width; + @if(mixin-exists(hook-divider-icon-line-left)) {@include hook-divider-icon-line-left();} +} + +.uk-divider-icon::after { + left: unquote('calc(50% + (#{$divider-icon-width} / 2))'); + width: $divider-icon-line-width; + @if(mixin-exists(hook-divider-icon-line-right)) {@include hook-divider-icon-line-right();} +} + + +/* Small + ========================================================================== */ + +/* + * Reset child height, caused by `inline-block` + */ + +.uk-divider-small { line-height: 0; } + +.uk-divider-small::after { + content: ""; + display: inline-block; + width: $divider-small-width; + max-width: 100%; + border-top: $divider-small-border-width solid $divider-small-border; + vertical-align: top; + @if(mixin-exists(hook-divider-small)) {@include hook-divider-small();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-divider-misc)) {@include hook-divider-misc();} + +// @mixin hook-divider-icon(){} +// @mixin hook-divider-icon-line(){} +// @mixin hook-divider-icon-line-left(){} +// @mixin hook-divider-icon-line-right(){} +// @mixin hook-divider-small(){} +// @mixin hook-divider-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-divider-icon-color: $inverse-global-border !default; +$inverse-divider-icon-line-border: $inverse-global-border !default; +$inverse-divider-small-border: $inverse-global-border !default; + + + +// @mixin hook-inverse-divider-icon(){} +// @mixin hook-inverse-divider-icon-line(){} +// @mixin hook-inverse-divider-small(){} diff --git a/scss/uikit/components/dotnav.scss b/scss/uikit/components/dotnav.scss new file mode 100644 index 00000000..f1f2a402 --- /dev/null +++ b/scss/uikit/components/dotnav.scss @@ -0,0 +1,157 @@ +// Name: Dotnav +// Description: Component to create dot navigations +// +// Component: `uk-dotnav` +// +// Modifier: `uk-dotnav-vertical` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$dotnav-margin-horizontal: 12px !default; +$dotnav-margin-vertical: $dotnav-margin-horizontal !default; + +$dotnav-item-width: 10px !default; +$dotnav-item-height: $dotnav-item-width !default; +$dotnav-item-border-radius: 50% !default; + +$dotnav-item-background: rgba($global-color, 0.2) !default; +$dotnav-item-hover-background: rgba($global-color, 0.6) !default; +$dotnav-item-onclick-background: rgba($global-color, 0.2) !default; +$dotnav-item-active-background: rgba($global-color, 0.6) !default; + + +/* ======================================================================== + Component: Dotnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ + +.uk-dotnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: (-$dotnav-margin-horizontal); + @if(mixin-exists(hook-dotnav)) {@include hook-dotnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ + +.uk-dotnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $dotnav-margin-horizontal; +} + + +/* Items + ========================================================================== */ + +/* + * Items + * 1. Hide text if present + */ + +.uk-dotnav > * > * { + display: block; + box-sizing: border-box; + width: $dotnav-item-width; + height: $dotnav-item-height; + border-radius: $dotnav-item-border-radius; + background: $dotnav-item-background; + /* 1 */ + text-indent: 100%; + overflow: hidden; + white-space: nowrap; + @if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();} +} + +/* Hover + Focus */ +.uk-dotnav > * > :hover, +.uk-dotnav > * > :focus { + background-color: $dotnav-item-hover-background; + outline: none; + @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();} +} + +/* OnClick */ +.uk-dotnav > * > :active { + background-color: $dotnav-item-onclick-background; + @if(mixin-exists(hook-dotnav-item-onclick)) {@include hook-dotnav-item-onclick();} +} + +/* Active */ +.uk-dotnav > .uk-active > * { + background-color: $dotnav-item-active-background; + @if(mixin-exists(hook-dotnav-item-active)) {@include hook-dotnav-item-active();} +} + + +/* Modifier: 'uk-dotnav-vertical' + ========================================================================== */ + +/* + * 1. Change direction + * 2. Gutter + */ + +.uk-dotnav-vertical { + /* 1 */ + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: (-$dotnav-margin-vertical); +} + +/* 2 */ +.uk-dotnav-vertical > * { + padding-left: 0; + padding-top: $dotnav-margin-vertical; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();} + +// @mixin hook-dotnav(){} +// @mixin hook-dotnav-item(){} +// @mixin hook-dotnav-item-hover(){} +// @mixin hook-dotnav-item-onclick(){} +// @mixin hook-dotnav-item-active(){} +// @mixin hook-dotnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-dotnav-item-background: rgba($inverse-global-color, 0.5) !default; +$inverse-dotnav-item-hover-background: rgba($inverse-global-color, 0.9) !default; +$inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !default; +$inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default; + + + +// @mixin hook-inverse-dotnav-item(){} +// @mixin hook-inverse-dotnav-item-hover(){} +// @mixin hook-inverse-dotnav-item-onclick(){} +// @mixin hook-inverse-dotnav-item-active(){}
\ No newline at end of file diff --git a/scss/uikit/components/drop.scss b/scss/uikit/components/drop.scss new file mode 100644 index 00000000..fb5e9e8c --- /dev/null +++ b/scss/uikit/components/drop.scss @@ -0,0 +1,74 @@ +// Name: Drop +// Description: Component to position any element next to any other element. +// +// Component: `uk-drop` +// +// Modifiers: `uk-drop-top-*` +// `uk-drop-bottom-*` +// `uk-drop-left-*` +// `uk-drop-right-*` +// `uk-drop-stack` +// `uk-drop-grid` +// +// States: `uk-open` +// +// Uses: Animation +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$drop-z-index: $global-z-index + 20 !default; +$drop-width: 300px !default; +$drop-margin: $global-margin !default; + + +/* ======================================================================== + Component: Drop + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + * 3. Set a default width + */ + +.uk-drop { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: $drop-z-index; + /* 3 */ + box-sizing: border-box; + width: $drop-width; +} + +/* Show */ +.uk-drop.uk-open { display: block; } + + +/* Direction / Alignment modifiers + ========================================================================== */ + +/* Direction */ +[class*='uk-drop-top'] { margin-top: (-$drop-margin); } +[class*='uk-drop-bottom'] { margin-top: $drop-margin; } +[class*='uk-drop-left'] { margin-left: (-$drop-margin); } +[class*='uk-drop-right'] { margin-left: $drop-margin; } + + +/* Grid modifiers + ========================================================================== */ + +.uk-drop-stack .uk-drop-grid > * { width: 100% !important; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();} + +// @mixin hook-drop-misc(){} diff --git a/scss/uikit/components/dropdown.scss b/scss/uikit/components/dropdown.scss new file mode 100644 index 00000000..49bb1277 --- /dev/null +++ b/scss/uikit/components/dropdown.scss @@ -0,0 +1,150 @@ +// Name: Dropdown +// Description: Component to create dropdown menus +// +// Component: `uk-dropdown` +// +// Adopted: `uk-dropdown-nav` +// +// Modifiers: `uk-dropdown-top-*` +// `uk-dropdown-bottom-*` +// `uk-dropdown-left-*` +// `uk-dropdown-right-*` +// `uk-dropdown-stack` +// `uk-dropdown-grid` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$dropdown-z-index: $global-z-index + 20 !default; +$dropdown-min-width: 200px !default; +$dropdown-padding: 15px !default; +$dropdown-background: $global-muted-background !default; +$dropdown-color: $global-color !default; +$dropdown-margin: $global-small-margin !default; + +$dropdown-nav-item-color: $global-muted-color !default; +$dropdown-nav-item-hover-color: $global-color !default; +$dropdown-nav-header-color: $global-emphasis-color !default; +$dropdown-nav-divider-border-width: $global-border-width !default; +$dropdown-nav-divider-border: $global-border !default; +$dropdown-nav-sublist-item-color: $global-muted-color !default; +$dropdown-nav-sublist-item-hover-color: $global-color !default; + + +/* ======================================================================== + Component: Dropdown + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + * 3. Set a default width + * 4. Style + */ + +.uk-dropdown { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: $dropdown-z-index; + /* 3 */ + box-sizing: border-box; + min-width: $dropdown-min-width; + /* 4 */ + padding: $dropdown-padding; + background: $dropdown-background; + color: $dropdown-color; + @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();} +} + +/* Show */ +.uk-dropdown.uk-open { display: block; } + + +/* Nav + * Adopts `uk-nav` + ========================================================================== */ + +.uk-dropdown-nav { + white-space: nowrap; + @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();} +} + +/* + * Items + */ + +.uk-dropdown-nav > li > a { + color: $dropdown-nav-item-color; + @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();} +} + +/* Hover + Focus + Active */ +.uk-dropdown-nav > li > a:hover, +.uk-dropdown-nav > li > a:focus, +.uk-dropdown-nav > li.uk-active > a { + color: $dropdown-nav-item-hover-color; + @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();} +} + +/* + * Header + */ + +.uk-dropdown-nav .uk-nav-header { + color: $dropdown-nav-header-color; + @if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();} +} + +/* + * Divider + */ + +.uk-dropdown-nav .uk-nav-divider { + border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border; + @if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();} +} + +/* + * Sublists + */ + +.uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; } + +.uk-dropdown-nav .uk-nav-sub a:hover, +.uk-dropdown-nav .uk-nav-sub a:focus { color: $dropdown-nav-sublist-item-hover-color; } + + +/* Direction / Alignment modifiers + ========================================================================== */ + +/* Direction */ +[class*='uk-dropdown-top'] { margin-top: (-$dropdown-margin); } +[class*='uk-dropdown-bottom'] { margin-top: $dropdown-margin; } +[class*='uk-dropdown-left'] { margin-left: (-$dropdown-margin); } +[class*='uk-dropdown-right'] { margin-left: $dropdown-margin; } + + +/* Grid modifiers + ========================================================================== */ + +.uk-dropdown-stack .uk-dropdown-grid > * { width: 100% !important; } + + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();} + +// @mixin hook-dropdown(){} +// @mixin hook-dropdown-nav(){} +// @mixin hook-dropdown-nav-item(){} +// @mixin hook-dropdown-nav-item-hover(){} +// @mixin hook-dropdown-nav-header(){} +// @mixin hook-dropdown-nav-divider(){} +// @mixin hook-dropdown-misc(){} diff --git a/scss/uikit/components/flex.scss b/scss/uikit/components/flex.scss new file mode 100644 index 00000000..1301fc43 --- /dev/null +++ b/scss/uikit/components/flex.scss @@ -0,0 +1,209 @@ +// Name: Flex +// Description: Utilities for layouts based on flexbox +// +// Component: `uk-flex-*` +// +// ======================================================================== + + +/* ======================================================================== + Component: Flex + ========================================================================== */ + +.uk-flex { display: flex; } +.uk-flex-inline { display: inline-flex; } + +/* + * Remove pseudo elements created by micro clearfix as precaution + */ + +.uk-flex::before, +.uk-flex::after, +.uk-flex-inline::before, +.uk-flex-inline::after { display: none; } + + +/* Alignment + ========================================================================== */ + +/* + * Align items along the main axis of the current line of the flex container + * Row: Horizontal + */ + +// Default +.uk-flex-left { justify-content: flex-start; } +.uk-flex-center { justify-content: center; } +.uk-flex-right { justify-content: flex-end; } +.uk-flex-between { justify-content: space-between; } +.uk-flex-around { justify-content: space-around; } + + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-flex-left\@s { justify-content: flex-start; } + .uk-flex-center\@s { justify-content: center; } + .uk-flex-right\@s { justify-content: flex-end; } + .uk-flex-between\@s { justify-content: space-between; } + .uk-flex-around\@s { justify-content: space-around; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-flex-left\@m { justify-content: flex-start; } + .uk-flex-center\@m { justify-content: center; } + .uk-flex-right\@m { justify-content: flex-end; } + .uk-flex-between\@m { justify-content: space-between; } + .uk-flex-around\@m { justify-content: space-around; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-flex-left\@l { justify-content: flex-start; } + .uk-flex-center\@l { justify-content: center; } + .uk-flex-right\@l { justify-content: flex-end; } + .uk-flex-between\@l { justify-content: space-between; } + .uk-flex-around\@l { justify-content: space-around; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-flex-left\@xl { justify-content: flex-start; } + .uk-flex-center\@xl { justify-content: center; } + .uk-flex-right\@xl { justify-content: flex-end; } + .uk-flex-between\@xl { justify-content: space-between; } + .uk-flex-around\@xl { justify-content: space-around; } + +} + +/* + * Align items in the cross axis of the current line of the flex container + * Row: Vertical + */ + +// Default +.uk-flex-stretch { align-items: stretch; } +.uk-flex-top { align-items: flex-start; } +.uk-flex-middle { align-items: center; } +.uk-flex-bottom { align-items: flex-end; } + + +/* Direction + ========================================================================== */ + +// Default +.uk-flex-row { flex-direction: row; } +.uk-flex-row-reverse { flex-direction: row-reverse; } +.uk-flex-column { flex-direction: column; } +.uk-flex-column-reverse { flex-direction: column-reverse; } + + +/* Wrap + ========================================================================== */ + +// Default +.uk-flex-nowrap { flex-wrap: nowrap; } +.uk-flex-wrap { flex-wrap: wrap; } +.uk-flex-wrap-reverse { flex-wrap: wrap-reverse; } + +/* + * Aligns items within the flex container when there is extra space in the cross-axis + * Only works if there is more than one line of flex items + */ + +// Default +.uk-flex-wrap-stretch { align-content: stretch; } +.uk-flex-wrap-top { align-content: flex-start; } +.uk-flex-wrap-middle { align-content: center; } +.uk-flex-wrap-bottom { align-content: flex-end; } +.uk-flex-wrap-between { align-content: space-between; } +.uk-flex-wrap-around { align-content: space-around; } + + +/* Item ordering + ========================================================================== */ + +/* + * Default is 0 + */ + +.uk-flex-first { order: -1;} +.uk-flex-last { order: 99;} + + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-flex-first\@s { order: -1; } + .uk-flex-last\@s { order: 99; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-flex-first\@m { order: -1; } + .uk-flex-last\@m { order: 99; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-flex-first\@l { order: -1; } + .uk-flex-last\@l { order: 99; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-flex-first\@xl { order: -1; } + .uk-flex-last\@xl { order: 99; } + +} + + +/* Item dimensions + ========================================================================== */ + +/* + * Initial: 0 1 auto + * Content dimensions, but shrinks + */ + +/* + * No Flex: 0 0 auto + * Content dimensions + */ + +.uk-flex-none { flex: none; } + +/* + * Relative Flex: 1 1 auto + * Space is allocated considering content + */ + +.uk-flex-auto { flex: auto; } + +/* + * Absolute Flex: 1 1 0% + * Space is allocated solely based on flex + */ + +.uk-flex-1 { flex: 1; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-flex-misc)) {@include hook-flex-misc();} + +// @mixin hook-flex-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/form-range.scss b/scss/uikit/components/form-range.scss new file mode 100644 index 00000000..f7a22a5d --- /dev/null +++ b/scss/uikit/components/form-range.scss @@ -0,0 +1,185 @@ +// Name: Form Range +// Description: Styles for the range input type +// +// Component: `uk-range` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$form-range-thumb-height: 15px !default; +$form-range-thumb-border-radius: 500px !default; +$form-range-thumb-background: $global-color !default; + +$form-range-track-height: 3px !default; +$form-range-track-background: darken($global-muted-background, 5%) !default; +$form-range-track-focus-background: darken($global-muted-background, 15%) !default; + + +/* ======================================================================== + Component: Form Range + ========================================================================== */ + +/* + * 1. Normalize and defaults + * 2. Prevent content overflow if a fixed width is used + * 3. Take the full width + * 4. Remove default style + * 5. Remove white background in Chrome + * 6. Remove padding in IE11 + */ + +.uk-range { + /* 1 */ + box-sizing: border-box; + margin: 0; + vertical-align: middle; + /* 2 */ + max-width: 100%; + /* 3 */ + width: 100%; + /* 4 */ + -webkit-appearance: none; + /* 5 */ + background: transparent; + /* 6 */ + padding: 0; + @if(mixin-exists(hook-form-range)) {@include hook-form-range();} +} + +/* Focus */ +.uk-range:focus { outline: none; } +.uk-range::-moz-focus-outer { border: none; } + +/* IE11 Reset */ +.uk-range::-ms-track { + height: $form-range-thumb-height; + background: transparent; + border-color: transparent; + color: transparent; +} + +/* + * Improves consistency of cursor style for clickable elements + */ + +.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; } +.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; } +.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; } + + +/* Thumb + ========================================================================== */ + +/* + * 1. Reset + * 2. Style + */ + +/* Webkit */ +.uk-range::-webkit-slider-thumb { + /* 1 */ + -webkit-appearance: none; + margin-top: (floor($form-range-thumb-height / 2) * -1); + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Firefox */ +.uk-range::-moz-range-thumb { + /* 1 */ + border: none; + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Edge */ +.uk-range::-ms-thumb { + /* 1 */ + margin-top: 0; +} + +/* IE11 */ +.uk-range::-ms-thumb { + /* 1 */ + border: none; + /* 2 */ + height: $form-range-thumb-height; + width: $form-range-thumb-height; + border-radius: $form-range-thumb-border-radius; + background: $form-range-thumb-background; + @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();} +} + +/* Edge + IE11 */ +.uk-range::-ms-tooltip { display: none; } + + +/* Track + ========================================================================== */ + +/* + * 1. Safari doesn't have a focus state. Using active instead. + */ + +/* Webkit */ +.uk-range::-webkit-slider-runnable-track { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-webkit-slider-runnable-track, +/* 1 */ +.uk-range:active::-webkit-slider-runnable-track { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + +/* Firefox */ +.uk-range::-moz-range-track { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-moz-range-track { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + +/* Edge */ +.uk-range::-ms-fill-lower, +.uk-range::-ms-fill-upper { + height: $form-range-track-height; + background: $form-range-track-background; + @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();} +} + +.uk-range:focus::-ms-fill-lower, +.uk-range:focus::-ms-fill-upper { + background: $form-range-track-focus-background; + @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();} + +// @mixin hook-form-range(){} +// @mixin hook-form-range-thumb(){} +// @mixin hook-form-range-track(){} +// @mixin hook-form-range-track-focus(){} +// @mixin hook-form-range-misc(){} diff --git a/scss/uikit/components/form.scss b/scss/uikit/components/form.scss new file mode 100644 index 00000000..e33f5337 --- /dev/null +++ b/scss/uikit/components/form.scss @@ -0,0 +1,764 @@ +// Name: Form +// Description: Styles for forms +// +// Component: `uk-form-*` +// `uk-input` +// `uk-select` +// `uk-textarea` +// `uk-radio` +// `uk-checkbox` +// `uk-legend` +// `uk-fieldset` +// +// Sub-objects: `uk-form-custom` +// `uk-form-stacked` +// `uk-form-horizontal` +// `uk-form-label` +// `uk-form-controls` +// `uk-form-icon` +// `uk-form-icon-flip` +// +// Modifiers: `uk-form-small` +// `uk-form-large` +// `uk-form-danger` +// `uk-form-success` +// `uk-form-blank` +// `uk-form-width-xsmall` +// `uk-form-width-small` +// `uk-form-width-medium` +// `uk-form-width-large` +// `uk-form-controls-text` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$form-height: $global-control-height !default; +$form-line-height: $form-height !default; +$form-padding-horizontal: 10px !default; +$form-padding-vertical: 4px !default; + +$form-background: $global-muted-background !default; +$form-color: $global-color !default; + +$form-focus-background: $global-muted-background !default; +$form-focus-color: $global-color !default; + +$form-disabled-background: $global-muted-background !default; +$form-disabled-color: $global-muted-color !default; + +$form-placeholder-color: $global-muted-color !default; + +$form-small-height: $global-control-small-height !default; +$form-small-padding-horizontal: 8px !default; +$form-small-line-height: $form-small-height !default; +$form-small-font-size: $global-small-font-size !default; + +$form-large-height: $global-control-large-height !default; +$form-large-padding-horizontal: 12px !default; +$form-large-line-height: $form-large-height !default; +$form-large-font-size: $global-medium-font-size !default; + +$form-danger-color: $global-danger-background !default; +$form-success-color: $global-success-background !default; + +$form-width-xsmall: 50px !default; +$form-width-small: 130px !default; +$form-width-medium: 200px !default; +$form-width-large: 500px !default; + +$form-select-padding-right: 20px !default; +$form-select-icon-color: $global-color !default; +$form-select-option-color: #444 !default; +$form-select-disabled-icon-color: $global-muted-color !default; + +$form-radio-size: 16px !default; +$form-radio-margin-top: -4px !default; +$form-radio-background: darken($global-muted-background, 5%) !default; + +$form-radio-checked-background: $global-primary-background !default; +$form-radio-checked-icon-color: $global-inverse-color !default; + +$form-radio-checked-focus-background: darken($global-primary-background, 10%) !default; + +$form-radio-disabled-background: $global-muted-background !default; +$form-radio-disabled-icon-color: $global-muted-color !default; + +$form-legend-font-size: $global-large-font-size !default; +$form-legend-line-height: 1.4 !default; + +$form-stacked-margin-bottom: $global-small-margin !default; + +$form-horizontal-label-width: 200px !default; +$form-horizontal-label-margin-top: 7px !default; +$form-horizontal-controls-margin-left: 215px !default; +$form-horizontal-controls-text-padding-top: 7px !default; + +$form-icon-width: $form-height !default; +$form-icon-font-size: $global-font-size !default; +$form-icon-color: $global-muted-color !default; +$form-icon-hover-color: $global-color !default; + +$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; +$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; +$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default; +$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; + + +/* ======================================================================== + Component: Form + ========================================================================== */ + +/* + * 1. Define consistent box sizing. + * Default is `content-box` with following exceptions set to `border-box` + * `select`, `input[type="checkbox"]` and `input[type="radio"]` + * `input[type="search"]` in Chrome, Safari and Opera + * `input[type="color"]` in Firefox + * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. + * 3. Remove `border-radius` in iOS. + * 4. Change font properties to `inherit` in all browsers. + */ + +.uk-input, +.uk-select, +.uk-textarea, +.uk-radio, +.uk-checkbox { + /* 1 */ + box-sizing: border-box; + /* 2 */ + margin: 0; + /* 3 */ + border-radius: 0; + /* 4 */ + font: inherit; +} + +/* + * Show the overflow in Edge. + */ + +.uk-input { overflow: visible; } + +/* + * Remove the inheritance of text transform in Firefox. + */ + +.uk-select { text-transform: none; } + +/* + * 1. Change font properties to `inherit` in all browsers + * 2. Don't inherit the `font-weight` and use `bold` instead. + * NOTE: Both declarations don't work in Chrome, Safari and Opera. + */ + +.uk-select optgroup { + /* 1 */ + font: inherit; + /* 2 */ + font-weight: bold; +} + +/* + * Remove the default vertical scrollbar in IE 10+. + */ + +.uk-textarea { overflow: auto; } + +/* + * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. + */ + +.uk-input[type="search"]::-webkit-search-cancel-button, +.uk-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + + +/* + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +.uk-input[type="number"]::-webkit-inner-spin-button, +.uk-input[type="number"]::-webkit-outer-spin-button { height: auto; } + +/* + * Removes placeholder transparency in Firefox. + */ + +.uk-input::-moz-placeholder, +.uk-textarea::-moz-placeholder { opacity: 1; } + +/* + * Improves consistency of cursor style for clickable elements + */ + +.uk-radio:not(:disabled), +.uk-checkbox:not(:disabled) { cursor: pointer; } + +/* + * Define consistent border, margin, and padding. + */ + +.uk-fieldset { + border: none; + margin: 0; + padding: 0; +} + + +/* Input, select and textarea + * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, + `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color` + * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image` + ========================================================================== */ + +/* + * Remove default style in iOS. + */ + +.uk-input, +.uk-textarea { -webkit-appearance: none; } + +/* + * 1. Prevent content overflow if a fixed width is used + * 2. Take the full width + * 3. Reset default + * 4. Style + */ + +.uk-input, +.uk-select, +.uk-textarea { + /* 1 */ + max-width: 100%; + /* 2 */ + width: 100%; + /* 3 */ + border: 0 none; + /* 4 */ + padding: 0 $form-padding-horizontal; + background: $form-background; + color: $form-color; + @if(mixin-exists(hook-form)) {@include hook-form();} +} + +/* + * Single-line + * 1. Allow any element to look like an `input` or `select` element + * 2. Make sure line-height is not larger than height + * Also needed to center the text vertically + */ + +.uk-input, +.uk-select:not([multiple]):not([size]) { + height: $form-height; + vertical-align: middle; + /* 1 */ + display: inline-block; + @if(mixin-exists(hook-form-single-line)) {@include hook-form-single-line();} +} + +/* 2 */ +.uk-input:not(input), +.uk-select:not(select) { line-height: $form-line-height; } + +/* + * Multi-line + */ + +.uk-select[multiple], +.uk-select[size], +.uk-textarea { + padding-top: $form-padding-vertical; + padding-bottom: $form-padding-vertical; + vertical-align: top; + @if(mixin-exists(hook-form-multi-line)) {@include hook-form-multi-line();} +} + +/* Focus */ +.uk-input:focus, +.uk-select:focus, +.uk-textarea:focus { + outline: none; + background-color: $form-focus-background; + color: $form-focus-color; + @if(mixin-exists(hook-form-focus)) {@include hook-form-focus();} +} + +/* Disabled */ +.uk-input:disabled, +.uk-select:disabled, +.uk-textarea:disabled { + background-color: $form-disabled-background; + color: $form-disabled-color; + @if(mixin-exists(hook-form-disabled)) {@include hook-form-disabled();} +} + +/* + * Placeholder + */ + +.uk-input:-ms-input-placeholder { color: $form-placeholder-color !important; } +.uk-input::placeholder { color: $form-placeholder-color; } + +.uk-textarea:-ms-input-placeholder { color: $form-placeholder-color !important; } +.uk-textarea::placeholder { color: $form-placeholder-color; } + + +/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ + +/* + * Small + */ + +.uk-form-small { font-size: $form-small-font-size; } + +.uk-form-small:not(textarea):not([multiple]):not([size]) { + height: $form-small-height; + padding-left: $form-small-padding-horizontal; + padding-right: $form-small-padding-horizontal; +} + +.uk-form-small:not(select):not(input):not(textarea) { line-height: $form-small-line-height; } + +/* + * Large + */ + +.uk-form-large { font-size: $form-large-font-size; } + +.uk-form-large:not(textarea):not([multiple]):not([size]) { + height: $form-large-height; + padding-left: $form-large-padding-horizontal; + padding-right: $form-large-padding-horizontal; +} + +.uk-form-large:not(select):not(input):not(textarea) { line-height: $form-large-line-height; } + + +/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ + +/* + * Error + */ + +.uk-form-danger, +.uk-form-danger:focus { + color: $form-danger-color; + @if(mixin-exists(hook-form-danger)) {@include hook-form-danger();} +} + +/* + * Success + */ + +.uk-form-success, +.uk-form-success:focus { + color: $form-success-color; + @if(mixin-exists(hook-form-success)) {@include hook-form-success();} +} + +/* + * Blank + */ + +.uk-form-blank { + background: none; + @if(mixin-exists(hook-form-blank)) {@include hook-form-blank();} +} + +.uk-form-blank:focus { + @if(mixin-exists(hook-form-blank-focus)) {@include hook-form-blank-focus();} +} + + +/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`) + ========================================================================== */ + +/* + * Fixed widths + * Different widths for mini sized `input` and `select` elements + */ + +input.uk-form-width-xsmall { width: $form-width-xsmall; } + +select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); } + +.uk-form-width-small { width: $form-width-small; } + +.uk-form-width-medium { width: $form-width-medium; } + +.uk-form-width-large { width: $form-width-large; } + + +/* Select + ========================================================================== */ + +/* + * 1. Remove default style. Also works in Firefox + * 2. Style + * 3. Remove default style in IE 10/11 + * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light. + */ + +.uk-select:not([multiple]):not([size]) { + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 2 */ + padding-right: $form-select-padding-right; + @include svg-fill($internal-form-select-image, "#000", $form-select-icon-color); + background-repeat: no-repeat; + background-position: 100% 50%; +} + +/* 3 */ +.uk-select:not([multiple]):not([size])::-ms-expand { display: none; } + +/* 4 */ +.uk-select:not([multiple]):not([size]) option { color: $form-select-option-color; } + +/* + * Disabled + */ + +.uk-select:not([multiple]):not([size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); } + + +/* Radio and checkbox + * Note: Does not work in IE11 + ========================================================================== */ + +/* + * 1. Style + * 2. Make box more robust so it clips the child element + * 3. Vertical alignment + * 4. Remove default style + * 5. Fix black background on iOS + * 6. Center icons + */ + +.uk-radio, +.uk-checkbox { + /* 1 */ + display: inline-block; + height: $form-radio-size; + width: $form-radio-size; + /* 2 */ + overflow: hidden; + /* 3 */ + margin-top: $form-radio-margin-top; + vertical-align: middle; + /* 4 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 5 */ + background-color: $form-radio-background; + /* 6 */ + background-repeat: no-repeat; + background-position: 50% 50%; + @if(mixin-exists(hook-form-radio)) {@include hook-form-radio();} +} + +.uk-radio { border-radius: 50%; } + +/* Focus */ +.uk-radio:focus, +.uk-checkbox:focus { + outline: none; + @if(mixin-exists(hook-form-radio-focus)) {@include hook-form-radio-focus();} +} + +/* + * Checked + */ + +.uk-radio:checked, +.uk-checkbox:checked, +.uk-checkbox:indeterminate { + background-color: $form-radio-checked-background; + @if(mixin-exists(hook-form-radio-checked)) {@include hook-form-radio-checked();} +} + +/* Focus */ +.uk-radio:checked:focus, +.uk-checkbox:checked:focus, +.uk-checkbox:indeterminate:focus { + background-color: $form-radio-checked-focus-background; + @if(mixin-exists(hook-form-radio-checked-focus)) {@include hook-form-radio-checked-focus();} +} + +/* + * Icons + */ + +.uk-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-checked-icon-color); } +.uk-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-checked-icon-color); } +.uk-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-checked-icon-color); } + +/* + * Disabled + */ + +.uk-radio:disabled, +.uk-checkbox:disabled { + background-color: $form-radio-disabled-background; + @if(mixin-exists(hook-form-radio-disabled)) {@include hook-form-radio-disabled();} +} + +.uk-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); } +.uk-checkbox:disabled:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-disabled-icon-color); } +.uk-checkbox:disabled:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-disabled-icon-color); } + + +/* Legend + ========================================================================== */ + +/* + * Legend + * 1. Behave like block element + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove padding so people aren't caught out if they zero out fieldsets. + * 4. Style + */ + +.uk-legend { + /* 1 */ + width: 100%; + /* 2 */ + color: inherit; + /* 3 */ + padding: 0; + /* 4 */ + font-size: $form-legend-font-size; + line-height: $form-legend-line-height; + @if(mixin-exists(hook-form-legend)) {@include hook-form-legend();} +} + + +/* Custom controls + ========================================================================== */ + +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Behave like most inline-block elements + */ + +.uk-form-custom { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + vertical-align: middle; +} + +/* + * 1. Position and resize the form control to always cover its container + * 2. Required for Firefox for positioning to the left + * 3. Required for Webkit to make `height` work + * 4. Hide controle and show cursor + * 5. Needed for the cursor + * 6. Clip height caused by 5. Needed for Webkit only + */ + +.uk-form-custom select, +.uk-form-custom input[type="file"] { + /* 1 */ + position: absolute; + top: 0; + z-index: 1; + width: 100%; + height: 100%; + /* 2 */ + left: 0; + /* 3 */ + -webkit-appearance: none; + /* 4 */ + opacity: 0; + cursor: pointer; +} + +.uk-form-custom input[type="file"] { + /* 5 */ + font-size: 500px; + /* 6 */ + overflow: hidden; +} + + +/* Label + ========================================================================== */ + +.uk-form-label { + @if(mixin-exists(hook-form-label)) {@include hook-form-label();} +} + + +/* Layout + ========================================================================== */ + +/* + * Stacked + */ + +.uk-form-stacked .uk-form-label { + display: block; + margin-bottom: $form-stacked-margin-bottom; + @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();} +} + +/* + * Horizontal + */ + +/* Tablet portrait and smaller */ +@media (max-width: $breakpoint-small-max) { + + /* Behave like `uk-form-stacked` */ + .uk-form-horizontal .uk-form-label { + display: block; + margin-bottom: $form-stacked-margin-bottom; + @if(mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();} + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-form-horizontal .uk-form-label { + width: $form-horizontal-label-width; + margin-top: $form-horizontal-label-margin-top; + float: left; + @if(mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();} + } + + .uk-form-horizontal .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; } + + /* Better vertical alignment if controls are checkboxes and radio buttons with text */ + .uk-form-horizontal .uk-form-controls-text { padding-top: $form-horizontal-controls-text-padding-top; } + +} + + +/* Icons + ========================================================================== */ + +/* + * 1. Set position + * 2. Set width + * 3. Center icon vertically and horizontally + * 4. Style + */ + +.uk-form-icon { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + width: $form-icon-width; + /* 3 */ + display: inline-flex; + justify-content: center; + align-items: center; + /* 4 */ + color: $form-icon-color; +} + +/* + * Required for `a`. + */ + +.uk-form-icon:hover { color: $form-icon-hover-color; } + +/* + * Make `input` element clickable through icon, e.g. if it's a `span` + */ + +.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; } + +/* + * Input padding + */ + +.uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-left: $form-icon-width !important; } + +/* + * Position modifier + */ + +.uk-form-icon-flip { + right: 0; + left: auto; +} + +.uk-form-icon-flip ~ .uk-input { padding-right: $form-icon-width !important; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-form-misc)) {@include hook-form-misc();} + +// @mixin hook-form(){} +// @mixin hook-form-single-line(){} +// @mixin hook-form-multi-line(){} +// @mixin hook-form-focus(){} +// @mixin hook-form-disabled(){} +// @mixin hook-form-danger(){} +// @mixin hook-form-success(){} +// @mixin hook-form-blank(){} +// @mixin hook-form-blank-focus(){} +// @mixin hook-form-radio(){} +// @mixin hook-form-radio-focus(){} +// @mixin hook-form-radio-checked(){} +// @mixin hook-form-radio-checked-focus(){} +// @mixin hook-form-radio-disabled(){} +// @mixin hook-form-legend(){} +// @mixin hook-form-label(){} +// @mixin hook-form-stacked-label(){} +// @mixin hook-form-horizontal-label(){} +// @mixin hook-form-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-form-background: $inverse-global-muted-background !default; +$inverse-form-color: $inverse-global-color !default; +$inverse-form-focus-background: $inverse-global-muted-background !default; +$inverse-form-focus-color: $inverse-global-color !default; +$inverse-form-placeholder-color: $inverse-global-muted-color !default; + +$inverse-form-select-icon-color: $inverse-global-color !default; + +$inverse-form-radio-background: darken($inverse-global-muted-background, 5%) !default; + +$inverse-form-radio-checked-background: $inverse-global-primary-background !default; +$inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default; + +$inverse-form-radio-checked-focus-background: darken($inverse-global-primary-background, 10%) !default; + +$inverse-form-icon-color: $inverse-global-muted-color !default; +$inverse-form-icon-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-form(){} +// @mixin hook-inverse-form-focus(){} +// @mixin hook-inverse-form-radio(){} +// @mixin hook-inverse-form-radio-focus(){} +// @mixin hook-inverse-form-radio-checked(){} +// @mixin hook-inverse-form-radio-checked-focus(){} +// @mixin hook-inverse-form-label(){} diff --git a/scss/uikit/components/grid-masonry.scss b/scss/uikit/components/grid-masonry.scss new file mode 100644 index 00000000..935ea251 --- /dev/null +++ b/scss/uikit/components/grid-masonry.scss @@ -0,0 +1,69 @@ +// Name: Grid +// Description: Component to create two dimensional grids +// +// Component: `uk-grid2` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$grid-column-xsmall: 100px !default; +$grid-column-small: 200px !default; +$grid-column-medium: 300px !default; +$grid-column-large: 400px !default; +$grid-column-xlarge: 500px !default; +$grid-column-xxlarge: 600px !default; + +$grid-gap-small: $global-small-gutter !default; +$grid-gap-medium: $global-gutter !default; +$grid-gap-large: $global-large-gutter !default; + + +/* ======================================================================== + Component: Grid + ========================================================================== */ + +.uk-grid-masonry { display: grid; } +.uk-grid-inline { display: inline-grid; } + + +/* Columns Width + ========================================================================== */ + +.uk-grid-column-xsmall { grid-template-columns: repeat(auto-fill, minmax($grid-column-xsmall,1fr)); } +.uk-grid-column-small { grid-template-columns: repeat(auto-fill, minmax($grid-column-small,1fr)); } +.uk-grid-column-medium { grid-template-columns: repeat(auto-fill, minmax($grid-column-medium,1fr)); } +.uk-grid-column-large { grid-template-columns: repeat(auto-fill, minmax($grid-column-large,1fr)); } +.uk-grid-column-xlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xlarge,1fr)); } +.uk-grid-column-xxlarge { grid-template-columns: repeat(auto-fill, minmax($grid-column-xxlarge,1fr)); } + + +/* Gap + ========================================================================== */ + +.uk-grid-gap-none { grid-gap: 0; } +.uk-grid-gap-small { grid-gap: $grid-gap-small; } +.uk-grid-gap-medium { grid-gap: $grid-gap-medium; } +.uk-grid-gap-large { grid-gap: $grid-gap-large; } + + +/* Auto Placement + ========================================================================== */ + +// Default +.uk-grid-auto-flow-row { grid-auto-flow: row; } +.uk-grid-auto-flow-column { grid-auto-flow: column; } +.uk-grid-auto-flow-dense { grid-auto-flow: dense; } + + +/* Item Span + ========================================================================== */ + +// TODO Fix implicit tracks if span is too large +.uk-grid-item-span-2 { grid-column-start: span 2; } +.uk-grid-item-span-3 { grid-column-start: span 3; } +.uk-grid-item-span-4 { grid-column-start: span 4; } +.uk-grid-item-span-5 { grid-column-start: span 5; } + diff --git a/scss/uikit/components/grid.scss b/scss/uikit/components/grid.scss new file mode 100644 index 00000000..455033c7 --- /dev/null +++ b/scss/uikit/components/grid.scss @@ -0,0 +1,352 @@ +// Name: Grid +// Description: Component to create responsive, fluid and nestable grids +// +// Component: `uk-grid` +// +// Modifiers: `uk-grid-small` +// `uk-grid-medium` +// `uk-grid-large` +// `uk-grid-collapse` +// `uk-grid-divider` +// `uk-grid-match` +// `uk-grid-stack` +// `uk-grid-margin` +// `uk-grid-margin-small` +// `uk-grid-margin-medium` +// `uk-grid-margin-large` +// `uk-grid-margin-collapse` +// +// Sub-modifier: `uk-grid-item-match` +// +// States: `uk-first-column` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$grid-gutter-horizontal: $global-gutter !default; +$grid-gutter-vertical: $grid-gutter-horizontal !default; +$grid-gutter-horizontal-l: $global-medium-gutter !default; +$grid-gutter-vertical-l: $grid-gutter-horizontal-l !default; + +$grid-small-gutter-horizontal: $global-small-gutter !default; +$grid-small-gutter-vertical: $grid-small-gutter-horizontal !default; + +$grid-medium-gutter-horizontal: $global-gutter !default; +$grid-medium-gutter-vertical: $grid-medium-gutter-horizontal !default; + +$grid-large-gutter-horizontal: $global-medium-gutter !default; +$grid-large-gutter-vertical: $grid-large-gutter-horizontal !default; +$grid-large-gutter-horizontal-l: $global-large-gutter !default; +$grid-large-gutter-vertical-l: $grid-large-gutter-horizontal-l !default; + +$grid-divider-border-width: $global-border-width !default; +$grid-divider-border: $global-border !default; + + +/* ======================================================================== + Component: Grid + ========================================================================== */ + +/* + * 1. Allow cells to wrap into the next line + * 2. Reset list + */ + +.uk-grid { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; +} + +/* + * Grid cell + * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto + * Reset margin for e.g. paragraphs + */ + +.uk-grid > * { margin: 0; } + +/* + * Remove margin from the last-child + */ + +.uk-grid > * > :last-child { margin-bottom: 0; } + + +/* Gutter + ========================================================================== */ + +/* + * Default + */ + +/* Horizontal */ +.uk-grid { margin-left: (-$grid-gutter-horizontal); } +.uk-grid > * { padding-left: $grid-gutter-horizontal; } + +/* Vertical */ +.uk-grid + .uk-grid, +.uk-grid > .uk-grid-margin, +* + .uk-grid-margin { margin-top: $grid-gutter-vertical; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Horizontal */ + .uk-grid { margin-left: (-$grid-gutter-horizontal-l); } + .uk-grid > * { padding-left: $grid-gutter-horizontal-l; } + + /* Vertical */ + .uk-grid + .uk-grid, + .uk-grid > .uk-grid-margin, + * + .uk-grid-margin { margin-top: $grid-gutter-vertical-l; } + +} + +/* + * Small + */ + +/* Horizontal */ +.uk-grid-small { margin-left: (-$grid-small-gutter-horizontal); } +.uk-grid-small > * { padding-left: $grid-small-gutter-horizontal; } + +/* Vertical */ +.uk-grid + .uk-grid-small, +.uk-grid-small > .uk-grid-margin, +* + .uk-grid-margin-small { margin-top: $grid-small-gutter-vertical; } + +/* + * Medium + */ + +/* Horizontal */ +.uk-grid-medium { margin-left: (-$grid-medium-gutter-horizontal); } +.uk-grid-medium > * { padding-left: $grid-medium-gutter-horizontal; } + +/* Vertical */ +.uk-grid + .uk-grid-medium, +.uk-grid-medium > .uk-grid-margin, +* + .uk-grid-margin-medium { margin-top: $grid-medium-gutter-vertical; } + +/* + * Large + */ + +/* Horizontal */ +.uk-grid-large { margin-left: (-$grid-large-gutter-horizontal); } +.uk-grid-large > * { padding-left: $grid-large-gutter-horizontal; } + +/* Vertical */ +.uk-grid + .uk-grid-large, +.uk-grid-large > .uk-grid-margin, +* + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Horizontal */ + .uk-grid-large { margin-left: (-$grid-large-gutter-horizontal-l); } + .uk-grid-large > * { padding-left: $grid-large-gutter-horizontal-l; } + + /* Vertical */ + .uk-grid + .uk-grid-large, + .uk-grid-large > .uk-grid-margin, + * + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical-l; } + +} + +/* + * Collapse + */ + +/* Horizontal */ +.uk-grid-collapse { margin-left: 0; } +.uk-grid-collapse > * { padding-left: 0; } + +/* Vertical */ +.uk-grid + .uk-grid-collapse, +.uk-grid-collapse > .uk-grid-margin { margin-top: 0; } + + +/* Divider + ========================================================================== */ + +.uk-grid-divider > * { position: relative; } + +.uk-grid-divider > :not(.uk-first-column)::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + border-left: $grid-divider-border-width solid $grid-divider-border; +} + +/* Vertical */ +.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + content: ""; + position: absolute; + left: 0; + right: 0; + border-top: $grid-divider-border-width solid $grid-divider-border; +} + +/* + * Default + */ + +/* Horizontal */ +.uk-grid-divider { margin-left: -($grid-gutter-horizontal * 2); } +.uk-grid-divider > * { padding-left: ($grid-gutter-horizontal * 2); } + +.uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal; } + +/* Vertical */ +.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical * 2); } + +.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-gutter-vertical); + left: ($grid-gutter-horizontal * 2); +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Horizontal */ + .uk-grid-divider { margin-left: -($grid-gutter-horizontal-l * 2); } + .uk-grid-divider > * { padding-left: ($grid-gutter-horizontal-l * 2); } + + .uk-grid-divider > :not(.uk-first-column)::before { left: $grid-gutter-horizontal-l; } + + /* Vertical */ + .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-gutter-vertical-l * 2); } + + .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-gutter-vertical-l); + left: ($grid-gutter-horizontal-l * 2); + } + +} + +/* + * Small + */ + +/* Horizontal */ +.uk-grid-divider.uk-grid-small { margin-left: -($grid-small-gutter-horizontal * 2); } +.uk-grid-divider.uk-grid-small > * { padding-left: ($grid-small-gutter-horizontal * 2); } + +.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before { left: $grid-small-gutter-horizontal; } + +/* Vertical */ +.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-small-gutter-vertical * 2); } + +.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-small-gutter-vertical); + left: ($grid-small-gutter-horizontal * 2); +} + +/* + * Medium + */ + +/* Horizontal */ +.uk-grid-divider.uk-grid-medium { margin-left: -($grid-medium-gutter-horizontal * 2); } +.uk-grid-divider.uk-grid-medium > * { padding-left: ($grid-medium-gutter-horizontal * 2); } + +.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before { left: $grid-medium-gutter-horizontal; } + +/* Vertical */ +.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-medium-gutter-vertical * 2); } + +.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-medium-gutter-vertical); + left: ($grid-medium-gutter-horizontal * 2); +} + +/* + * Large + */ + +/* Horizontal */ +.uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal * 2); } +.uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal * 2); } + +.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal; } + +/* Vertical */ +.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical * 2); } + +.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-large-gutter-vertical); + left: ($grid-large-gutter-horizontal * 2); +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Horizontal */ + .uk-grid-divider.uk-grid-large { margin-left: -($grid-large-gutter-horizontal-l * 2); } + .uk-grid-divider.uk-grid-large > * { padding-left: ($grid-large-gutter-horizontal-l * 2); } + + .uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal-l; } + + /* Vertical */ + .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin { margin-top: ($grid-large-gutter-vertical-l * 2); } + + .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before { + top: (-$grid-large-gutter-vertical-l); + left: ($grid-large-gutter-horizontal-l * 2); + } + +} + + +/* Match child of a grid cell + ========================================================================== */ + +/* + * Behave like a block element + * 1. Wrap into the next line + * 2. Take the full width, at least 100%. Only if no class from the Width component is set. + * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids) + */ + +.uk-grid-match > *, +.uk-grid-item-match { + display: flex; + /* 1 */ + flex-wrap: wrap; +} + +.uk-grid-match > * > :not([class*='uk-width']), +.uk-grid-item-match > :not([class*='uk-width']) { + /* 2 */ + box-sizing: border-box; + width: 100%; + /* 3 */ + flex: auto; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-grid-misc)) {@include hook-grid-misc();} + +// @mixin hook-grid-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-grid-divider-border: $inverse-global-border !default; + + diff --git a/scss/uikit/components/heading.scss b/scss/uikit/components/heading.scss new file mode 100644 index 00000000..13f97229 --- /dev/null +++ b/scss/uikit/components/heading.scss @@ -0,0 +1,223 @@ +// Name: Heading +// Description: Styles for headings +// +// Component: `uk-heading-primary` +// `uk-heading-hero` +// `uk-heading-divider` +// `uk-heading-bullet` +// `uk-heading-line` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$heading-primary-font-size-l: 3.75rem !default; // 60px +$heading-primary-line-height-l: 1.1 !default; + +$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default; // 54px + +$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default; // 48px +$heading-primary-line-height: 1.2 !default; + +$heading-hero-font-size-l: 8rem !default; // 128px +$heading-hero-line-height-l: 1 !default; + +$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default; // 96px +$heading-hero-line-height-m: 1 !default; + +$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default; // 64px +$heading-hero-line-height: 1.1 !default; + +$heading-divider-padding-bottom: 10px !default; +$heading-divider-border-width: $global-border-width !default; +$heading-divider-border: $global-border !default; + +$heading-bullet-top: unquote('calc(-0.1 * 1em)') !default; +$heading-bullet-height: 0.9em !default; +$heading-bullet-margin-right: 10px !default; +$heading-bullet-border-width: 5px !default; +$heading-bullet-border: $global-border !default; + +$heading-line-top: 50% !default; +$heading-line-height: $heading-line-border-width !default; +$heading-line-width: 2000px !default; +$heading-line-border-width: $global-border-width !default; +$heading-line-border: $global-border !default; +$heading-line-margin-horizontal: 0.6em !default; + + +/* ======================================================================== + Component: Heading + ========================================================================== */ + + +/* Primary + ========================================================================== */ + +.uk-heading-primary { + font-size: $heading-primary-font-size; + line-height: $heading-primary-line-height; + @if(mixin-exists(hook-heading-primary)) {@include hook-heading-primary();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-heading-primary { font-size: $heading-primary-font-size-m; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-heading-primary { + font-size: $heading-primary-font-size-l; + line-height: $heading-primary-line-height-l; + } + +} + + +/* Hero + ========================================================================== */ + +.uk-heading-hero { + font-size: $heading-hero-font-size; + line-height: $heading-hero-line-height; + @if(mixin-exists(hook-heading-hero)) {@include hook-heading-hero();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-heading-hero { + font-size: $heading-hero-font-size-m; + line-height: $heading-hero-line-height-m; + } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-heading-hero { + font-size: $heading-hero-font-size-l; + line-height: $heading-hero-line-height-l; + } + +} + + +/* Divider + ========================================================================== */ + +.uk-heading-divider { + padding-bottom: $heading-divider-padding-bottom; + border-bottom: $heading-divider-border-width solid $heading-divider-border; + @if(mixin-exists(hook-heading-divider)) {@include hook-heading-divider();} +} + + +/* Bullet + ========================================================================== */ + +.uk-heading-bullet { position: relative; } + +/* + * 1. Using `inline-block` to make it work with text alignment + * 2. Center vertically + * 3. Style + */ + +.uk-heading-bullet::before { + content: ""; + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + top: $heading-bullet-top; + vertical-align: middle; + /* 3 */ + height: $heading-bullet-height; + margin-right: $heading-bullet-margin-right; + border-left: $heading-bullet-border-width solid $heading-bullet-border; + @if(mixin-exists(hook-heading-bullet)) {@include hook-heading-bullet();} +} + + +/* Line + ========================================================================== */ + +/* + * Clip the child element + */ + +.uk-heading-line { overflow: hidden; } + +/* + * Extra markup is needed to make it work with text align + */ + +.uk-heading-line > * { + display: inline-block; + position: relative; +} + +/* + * 1. Center vertically + * 2. Make the element as large as possible. It's clipped by the container. + * 3. Style + */ + +.uk-heading-line > ::before, +.uk-heading-line > ::after { + content: ""; + /* 1 */ + position: absolute; + top: unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))'); + /* 2 */ + width: $heading-line-width; + /* 3 */ + border-bottom: $heading-line-border-width solid $heading-line-border; + @if(mixin-exists(hook-heading-line)) {@include hook-heading-line();} +} + +.uk-heading-line > ::before { + right: 100%; + margin-right: $heading-line-margin-horizontal; +} +.uk-heading-line > ::after { + left: 100%; + margin-left: $heading-line-margin-horizontal; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-heading-misc)) {@include hook-heading-misc();} + +// @mixin hook-heading-primary(){} +// @mixin hook-heading-hero(){} +// @mixin hook-heading-divider(){} +// @mixin hook-heading-bullet(){} +// @mixin hook-heading-line(){} +// @mixin hook-heading-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-heading-divider-border: $inverse-global-border !default; +$inverse-heading-bullet-border: $inverse-global-border !default; +$inverse-heading-line-border: $inverse-global-border !default; + + + +// @mixin hook-inverse-heading-primary(){} +// @mixin hook-inverse-heading-hero(){} +// @mixin hook-inverse-heading-divider(){} +// @mixin hook-inverse-heading-bullet(){} +// @mixin hook-inverse-heading-line(){} diff --git a/scss/uikit/components/height.scss b/scss/uikit/components/height.scss new file mode 100644 index 00000000..3bcc1504 --- /dev/null +++ b/scss/uikit/components/height.scss @@ -0,0 +1,54 @@ +// Name: Height +// Description: Utilities for heights +// +// Component: `uk-height-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$height-small-height: 150px !default; +$height-medium-height: 300px !default; +$height-large-height: 450px !default; + + +/* ======================================================================== + Component: Height + ========================================================================== */ + +[class*='uk-height'] { box-sizing: border-box; } + +/* + * Only works if parent element has a height set + */ + +.uk-height-1-1 { height: 100%; } + +/* + * Useful to create image teasers + */ + +.uk-height-viewport { min-height: 100vh; } + +/* + * Pixel + * Useful for `overflow: auto` + */ + +.uk-height-small { height: $height-small-height; } +.uk-height-medium { height: $height-medium-height; } +.uk-height-large { height: $height-large-height; } + +.uk-height-max-small { max-height: $height-small-height; } +.uk-height-max-medium { max-height: $height-medium-height; } +.uk-height-max-large { max-height: $height-large-height; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-height-misc)) {@include hook-height-misc();} + +// @mixin hook-height-misc(){} diff --git a/scss/uikit/components/icon.scss b/scss/uikit/components/icon.scss new file mode 100644 index 00000000..2ff70ecf --- /dev/null +++ b/scss/uikit/components/icon.scss @@ -0,0 +1,223 @@ +// Name: Icon +// Description: Component to create icons +// +// Component: `uk-icon` +// +// Modifiers: `uk-icon-image` +// `uk-icon-link` +// `uk-icon-button` +// +// States: `uk-preserve` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$icon-image-size: 20px !default; + +$icon-link-color: $global-muted-color !default; +$icon-link-hover-color: $global-color !default; +$icon-link-active-color: darken($global-color, 5%) !default; + +$icon-button-size: 36px !default; +$icon-button-border-radius: 500px !default; +$icon-button-background: $global-muted-background !default; +$icon-button-color: $global-muted-color !default; + +$icon-button-hover-background: darken($icon-button-background, 5%) !default; +$icon-button-hover-color: $global-color !default; + +$icon-button-active-background: darken($icon-button-background, 10%) !default; +$icon-button-active-color: $global-color !default; + + +/* ======================================================================== + Component: Icon + ========================================================================== */ + +/* + * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component. + * 1. Remove margins in Chrome, Safari and Opera. + * 2. Remove borders for `button`. + * 3. Remove border-radius in Chrome. + * 4. Address `overflow` set to `hidden` in IE. + * 5. Correct `font` properties and `color` not being inherited for `button`. + * 6. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 7. Remove default `button` padding and background color + * 8. Style + * 9. Fill all SVG elements with the current text color if no `fill` attribute is set + * 10. Let the container fit the height of the icon + */ + +.uk-icon { + /* 1 */ + margin: 0; + /* 2 */ + border: none; + /* 3 */ + border-radius: 0; + /* 4 */ + overflow: visible; + /* 5 */ + font: inherit; + color: inherit; + /* 6 */ + text-transform: none; + /* 7. */ + padding: 0; + background-color: transparent; + /* 8 */ + display: inline-block; + /* 9 */ + fill: currentcolor; + /* 10 */ + line-height: 0; +} + +/* Required for `button`. */ +button.uk-icon:not(:disabled) { cursor: pointer; } + +/* + * Remove the inner border and padding in Firefox. + */ + +.uk-icon::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * Set the fill and stroke color of all SVG elements to the current text color + * 1. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ + */ + +.uk-icon [fill*='#']:not(.uk-preserve), +.uk-icon [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 1 +.uk-icon [stroke*='#']:not(.uk-preserve), +.uk-icon [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 1 + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ + +.uk-icon > * { transform: translate(0,0); } + + +/* Image modifier + ========================================================================== */ + +/* + * Display images in icon dimensions + */ + +.uk-icon-image { + width: $icon-image-size; + height: $icon-image-size; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Link + */ + +.uk-icon-link { + color: $icon-link-color; + @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();} +} + +.uk-icon-link:hover, +.uk-icon-link:focus { + color: $icon-link-hover-color; + outline: none; + @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();} +} + +/* OnClick + Active */ +.uk-icon-link:active, +.uk-active > .uk-icon-link { + color: $icon-link-active-color; + @if(mixin-exists(hook-icon-link-active)) {@include hook-icon-link-active();} +} + +/* + * Button + * 1. Center icon vertically and horizontally + */ + +.uk-icon-button { + box-sizing: border-box; + width: $icon-button-size; + height: $icon-button-size; + border-radius: $icon-button-border-radius; + background: $icon-button-background; + color: $icon-button-color; + vertical-align: middle; + /* 1 */ + display: inline-flex; + justify-content: center; + align-items: center; + @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();} +} + +/* Hover + Focus */ +.uk-icon-button:hover, +.uk-icon-button:focus { + background-color: $icon-button-hover-background; + color: $icon-button-hover-color; + outline: none; + @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();} +} + +/* OnClick + Active */ +.uk-icon-button:active, +.uk-active > .uk-icon-button { + background-color: $icon-button-active-background; + color: $icon-button-active-color; + @if(mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-icon-misc)) {@include hook-icon-misc();} + +// @mixin hook-icon-link(){} +// @mixin hook-icon-link-hover(){} +// @mixin hook-icon-link-active(){} +// @mixin hook-icon-button(){} +// @mixin hook-icon-button-hover(){} +// @mixin hook-icon-button-active(){} +// @mixin hook-icon-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-icon-link-color: $inverse-global-muted-color !default; +$inverse-icon-link-hover-color: $inverse-global-color !default; +$inverse-icon-link-active-color: $inverse-global-color !default; +$inverse-icon-button-background: $inverse-global-muted-background !default; +$inverse-icon-button-color: $inverse-global-muted-color !default; +$inverse-icon-button-hover-background: darken($inverse-icon-button-background, 5%) !default; +$inverse-icon-button-hover-color: $inverse-global-color !default; +$inverse-icon-button-active-background: darken($inverse-icon-button-background, 10%) !default; +$inverse-icon-button-active-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-icon-link(){} +// @mixin hook-inverse-icon-link-hover(){} +// @mixin hook-inverse-icon-link-active(){} +// @mixin hook-inverse-icon-button(){} +// @mixin hook-inverse-icon-button-hover(){} +// @mixin hook-inverse-icon-button-active(){} diff --git a/scss/uikit/components/iconnav.scss b/scss/uikit/components/iconnav.scss new file mode 100644 index 00000000..ae739c90 --- /dev/null +++ b/scss/uikit/components/iconnav.scss @@ -0,0 +1,140 @@ +// Name: Iconnav +// Description: Component to create icon navigations +// +// Component: `uk-iconnav` +// +// Modifier: `uk-iconnav-vertical` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$iconnav-margin-horizontal: $global-small-margin !default; +$iconnav-margin-vertical: $iconnav-margin-horizontal !default; + +$iconnav-item-color: $global-muted-color !default; + +$iconnav-item-hover-color: $global-color !default; + +$iconnav-item-active-color: $global-color !default; + + +/* ======================================================================== + Component: Iconnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ + +.uk-iconnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: (-$iconnav-margin-horizontal); + @if(mixin-exists(hook-iconnav)) {@include hook-iconnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ + +.uk-iconnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $iconnav-margin-horizontal; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ + +.uk-iconnav > * > a { + /* 1 */ + display: block; + /* 2 */ + color: $iconnav-item-color; + @if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();} +} + +/* Hover + Focus */ +.uk-iconnav > * > a:hover, +.uk-iconnav > * > a:focus { + color: $iconnav-item-hover-color; + outline: none; + @if(mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();} +} + +/* Active */ +.uk-iconnav > .uk-active > a { + color: $iconnav-item-active-color; + @if(mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();} +} + + +/* Modifier: 'uk-iconnav-vertical' + ========================================================================== */ + +/* + * 1. Change direction + * 2. Gutter + */ + +.uk-iconnav-vertical { + /* 1 */ + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: (-$iconnav-margin-vertical); +} + +/* 2 */ +.uk-iconnav-vertical > * { + padding-left: 0; + padding-top: $iconnav-margin-vertical; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();} + +// @mixin hook-iconnav(){} +// @mixin hook-iconnav-item(){} +// @mixin hook-iconnav-item-hover(){} +// @mixin hook-iconnav-item-active(){} +// @mixin hook-iconnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-iconnav-item-color: $inverse-global-muted-color !default; +$inverse-iconnav-item-hover-color: $inverse-global-color !default; +$inverse-iconnav-item-active-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-iconnav-item(){} +// @mixin hook-inverse-iconnav-item-hover(){} +// @mixin hook-inverse-iconnav-item-active(){}
\ No newline at end of file diff --git a/scss/uikit/components/inverse.scss b/scss/uikit/components/inverse.scss new file mode 100644 index 00000000..c1b0c07c --- /dev/null +++ b/scss/uikit/components/inverse.scss @@ -0,0 +1,46 @@ +// Name: Inverse +// Description: Inverse component style for light or dark backgrounds +// +// Component: `uk-light` +// `uk-dark` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$inverse-global-color-mode: light !default; + +$inverse-global-color: rgba($global-inverse-color, 0.7) !default; +$inverse-global-emphasis-color: $global-inverse-color !default; +$inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default; +$inverse-global-inverse-color: $global-color !default; + +$inverse-global-primary-background: $global-inverse-color !default; +$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default; + +$inverse-global-border: rgba($global-inverse-color, 0.2) !default; + + +/* ======================================================================== + Component: Inverse + ========================================================================== */ + + + +/* + * Implemented class depends on the general theme color + * `uk-light` is for light colors on dark backgrounds + * `uk-dark` is or dark colors on light backgrounds + */ + +@if ($inverse-global-color-mode == light) { .uk-light { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}} + +@if ($inverse-global-color-mode == dark) { .uk-dark { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}} + + +// Hooks +// ======================================================================== + +// @mixin hook-inverse(){}
\ No newline at end of file diff --git a/scss/uikit/components/label.scss b/scss/uikit/components/label.scss new file mode 100644 index 00000000..6600aedf --- /dev/null +++ b/scss/uikit/components/label.scss @@ -0,0 +1,102 @@ +// Name: Label +// Description: Component to indicate important notes +// +// Component: `uk-label` +// +// Modifiers: `uk-label-success` +// `uk-label-warning` +// `uk-label-danger` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$label-padding-vertical: 0 !default; +$label-padding-horizontal: $global-small-margin !default; +$label-background: $global-primary-background !default; +$label-line-height: $global-line-height !default; +$label-font-size: $global-small-font-size !default; +$label-color: $global-inverse-color !default; + +$label-success-background: $global-success-background !default; +$label-success-color: $global-inverse-color !default; +$label-warning-background: $global-warning-background !default; +$label-warning-color: $global-inverse-color !default; +$label-danger-background: $global-danger-background !default; +$label-danger-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Label + ========================================================================== */ + +.uk-label { + display: inline-block; + padding: $label-padding-vertical $label-padding-horizontal; + background: $label-background; + line-height: $label-line-height; + font-size: $label-font-size; + color: $label-color; + vertical-align: middle; + white-space: nowrap; + @if(mixin-exists(hook-label)) {@include hook-label();} +} + + +/* Color modifiers + ========================================================================== */ + +/* + * Success + */ + +.uk-label-success { + background-color: $label-success-background; + color: $label-success-color; + @if(mixin-exists(hook-label-success)) {@include hook-label-success();} +} + +/* + * Warning + */ + +.uk-label-warning { + background-color: $label-warning-background; + color: $label-warning-color; + @if(mixin-exists(hook-label-warning)) {@include hook-label-warning();} +} + +/* + * Danger + */ + +.uk-label-danger { + background-color: $label-danger-background; + color: $label-danger-color; + @if(mixin-exists(hook-label-danger)) {@include hook-label-danger();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-label-misc)) {@include hook-label-misc();} + +// @mixin hook-label(){} +// @mixin hook-label-success(){} +// @mixin hook-label-warning(){} +// @mixin hook-label-danger(){} +// @mixin hook-label-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-label-background: $inverse-global-primary-background !default; +$inverse-label-color: $inverse-global-inverse-color !default; + + + +// @mixin hook-inverse-label(){}
\ No newline at end of file diff --git a/scss/uikit/components/leader.scss b/scss/uikit/components/leader.scss new file mode 100644 index 00000000..15e15749 --- /dev/null +++ b/scss/uikit/components/leader.scss @@ -0,0 +1,66 @@ +// Name: Leader +// Description: Component to create dot leaders +// +// Component: `uk-leader` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$leader-fill-content: '.' !default; +$leader-fill-margin-left: $global-small-gutter !default; + + +/* ======================================================================== + Component: Leader + ========================================================================== */ + +.uk-leader { overflow: hidden; } + +/* + * 1. Place element in text flow + * 2. Never break into a new line + * 3. Get a string back with as many repeating characters to fill the container + * 4. Prevent wrapping. Overflowing characters will be clipped by the container + */ + +.uk-leader-fill::after { + /* 1 */ + display: inline-block; + margin-left: $leader-fill-margin-left; + /* 2 */ + width: 0; + /* 3 */ + content: attr(data-fill); + /* 4 */ + white-space: nowrap; + @if(mixin-exists(hook-leader)) {@include hook-leader();} +} + +/* + * Hide if media does not match + */ + +.uk-leader-fill.uk-leader-hide::after { display: none; } + +/* Pass fill character to JS */ +.var-leader-fill::before { content: $leader-fill-content; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-leader-misc)) {@include hook-leader-misc();} + +// @mixin hook-leader(){} +// @mixin hook-leader-misc(){} + + +// Inverse +// ======================================================================== + + + +// @mixin hook-inverse-leader(){} diff --git a/scss/uikit/components/lightbox.scss b/scss/uikit/components/lightbox.scss new file mode 100644 index 00000000..4f9c698d --- /dev/null +++ b/scss/uikit/components/lightbox.scss @@ -0,0 +1,232 @@ +// Name: Lightbox +// Description: Component to create an lightbox image gallery +// +// Component: `uk-lightbox` +// +// Sub-objects: `uk-lightbox-page` +// `uk-lightbox-items` +// `uk-lightbox-toolbar` +// `uk-lightbox-toolbar-icon` +// `uk-lightbox-button` +// `uk-lightbox-caption` +// `uk-lightbox-iframe` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$lightbox-z-index: $global-z-index + 10 !default; +$lightbox-background: #000 !default; + +$lightbox-item-color: rgba(255,255,255,0.7) !default; + +$lightbox-toolbar-padding-vertical: 10px !default; +$lightbox-toolbar-padding-horizontal: 10px !default; +$lightbox-toolbar-background: rgba(0,0,0,0.3) !default; +$lightbox-toolbar-color: rgba(255,255,255,0.7) !default; + +$lightbox-toolbar-icon-padding: 5px !default; +$lightbox-toolbar-icon-color: rgba(255,255,255,0.7) !default; + +$lightbox-toolbar-icon-hover-color: #fff !default; + +$lightbox-button-size: 50px !default; +$lightbox-button-background: $lightbox-toolbar-background !default; +$lightbox-button-color: rgba(255,255,255,0.7) !default; + +$lightbox-button-hover-color: #fff !default; + + +/* ======================================================================== + Component: Lightbox + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + * 3. Allow scrolling for the modal dialog + * 4. Horizontal padding + * 5. Mask the background page + * 6. Fade-in transition + */ + +.uk-lightbox { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $lightbox-z-index; + /* 5 */ + background: $lightbox-background; + /* 6 */ + opacity: 0; + transition: opacity 0.15s linear; + @if(mixin-exists(hook-lightbox)) {@include hook-lightbox();} +} + +/* + * Open + * 1. Center child + * 2. Fade-in + */ + +.uk-lightbox.uk-open { + display: block; + /* 2 */ + opacity: 1; +} + + +/* Page + ========================================================================== */ + +/* + * Prevent scrollbars + */ + +.uk-lightbox-page { overflow: hidden; } + + +/* Item + ========================================================================== */ + +/* + * 1. Center child within the viewport + * 2. Not visible by default + * 3. Color needed for spinner icon + * 4. Optimize animation + * 5. Responsiveness + * Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera + * Using `vh` and `vw` to make responsive image work in IE11 + */ + +.uk-lightbox-items > * { + /* 1 */ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + /* 2 */ + display: none; + justify-content: center; + align-items: center; + /* 3 */ + color: $lightbox-item-color; + /* 4 */ + will-change: transform, opacity; + @if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();} +} + +/* 5 */ +.uk-lightbox-items > * > * { + max-width: 100vw; + max-height: 100vh; +} + +.uk-lightbox-items > * > :not(iframe) { + width: auto; + height: auto; +} + +.uk-lightbox-items > .uk-active { display: flex; } + +/* Toolbar + ========================================================================== */ + +.uk-lightbox-toolbar { + padding: $lightbox-toolbar-padding-vertical $lightbox-toolbar-padding-horizontal; + background: $lightbox-toolbar-background; + color: $lightbox-toolbar-color; + @if(mixin-exists(hook-lightbox-toolbar)) {@include hook-lightbox-toolbar();} +} + +.uk-lightbox-toolbar * { color: $lightbox-toolbar-color; } + + +/* Toolbar Icon (Close) + ========================================================================== */ + +.uk-lightbox-toolbar-icon { + padding: $lightbox-toolbar-icon-padding; + color: $lightbox-toolbar-icon-color; + @if(mixin-exists(hook-lightbox-toolbar-icon)) {@include hook-lightbox-toolbar-icon();} +} + +/* + * Hover + */ + +.uk-lightbox-toolbar-icon:hover { + color: $lightbox-toolbar-icon-hover-color; + @if(mixin-exists(hook-lightbox-toolbar-icon-hover)) {@include hook-lightbox-toolbar-icon-hover();} +} + + + +/* Button (Slidenav) + ========================================================================== */ + +/* + * 1. Center icon vertically and horizontally + */ + +.uk-lightbox-button { + box-sizing: border-box; + width: $lightbox-button-size; + height: $lightbox-button-size; + background: $lightbox-button-background; + color: $lightbox-button-color; + /* 1 */ + display: inline-flex; + justify-content: center; + align-items: center; + @if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();} +} + +/* + * Hover + */ + +.uk-lightbox-button:hover { + color: $lightbox-button-hover-color; + @if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();} +} + + +/* Caption + ========================================================================== */ + +.uk-lightbox-caption {} + + +/* Iframe + ========================================================================== */ + +.uk-lightbox-iframe { + width: 80%; + height: 80%; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();} + +// @mixin hook-lightbox(){} +// @mixin hook-lightbox-item(){} +// @mixin hook-lightbox-toolbar(){} +// @mixin hook-lightbox-toolbar-icon(){} +// @mixin hook-lightbox-toolbar-icon-hover(){} +// @mixin hook-lightbox-button(){} +// @mixin hook-lightbox-button-hover(){} +// @mixin hook-lightbox-misc(){} diff --git a/scss/uikit/components/link.scss b/scss/uikit/components/link.scss new file mode 100644 index 00000000..9e0ef0e7 --- /dev/null +++ b/scss/uikit/components/link.scss @@ -0,0 +1,123 @@ +// Name: Link +// Description: Styles for links +// +// Component: `uk-link-muted` +// `uk-link-text` +// `uk-link-heading` +// `uk-link-reset` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$link-muted-color: $global-muted-color !default; +$link-muted-hover-color: $global-color !default; + +$link-text-hover-color: $global-muted-color !default; + +$link-heading-hover-color: $global-primary-background !default; +$link-heading-hover-text-decoration: none !default; + + +/* ======================================================================== + Component: Link + ========================================================================== */ + + +/* Muted + ========================================================================== */ + +a.uk-link-muted, +.uk-link-muted a { + color: $link-muted-color; + @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();} +} + +a.uk-link-muted:hover, +.uk-link-muted a:hover { + color: $link-muted-hover-color; + @if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();} +} + + +/* Text + ========================================================================== */ + +a.uk-link-text:not(:hover), +.uk-link-text a:not(:hover) { + color: inherit; + @if(mixin-exists(hook-link-text)) {@include hook-link-text();} +} + +a.uk-link-text:hover, +.uk-link-text a:hover { + color: $link-text-hover-color; + @if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();} +} + + +/* Heading + ========================================================================== */ + +a.uk-link-heading:not(:hover), +.uk-link-heading a:not(:hover) { + color: inherit; + @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();} +} + +a.uk-link-heading:hover, +.uk-link-heading a:hover { + color: $link-heading-hover-color; + text-decoration: $link-heading-hover-text-decoration; + @if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();} +} + + +/* Reset + ========================================================================== */ + +/* + * `!important` needed to override inverse component + */ + +a.uk-link-reset, +a.uk-link-reset:hover, +.uk-link-reset a, +.uk-link-reset a:hover { + color: inherit !important; + text-decoration: none !important; + @if(mixin-exists(hook-link-reset)) {@include hook-link-reset();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-link-misc)) {@include hook-link-misc();} + +// @mixin hook-link-muted(){} +// @mixin hook-link-muted-hover(){} +// @mixin hook-link-text(){} +// @mixin hook-link-text-hover(){} +// @mixin hook-link-heading(){} +// @mixin hook-link-heading-hover(){} +// @mixin hook-link-reset(){} +// @mixin hook-link-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-link-muted-color: $inverse-global-muted-color !default; +$inverse-link-muted-hover-color: $inverse-global-color !default; +$inverse-link-text-hover-color: $inverse-global-muted-color !default; +$inverse-link-heading-hover-color: $inverse-global-primary-background !default; + + + +// @mixin hook-inverse-link-muted(){} +// @mixin hook-inverse-link-muted-hover(){} +// @mixin hook-inverse-link-text-hover(){} +// @mixin hook-inverse-link-heading-hover(){} diff --git a/scss/uikit/components/list.scss b/scss/uikit/components/list.scss new file mode 100644 index 00000000..ed810bb0 --- /dev/null +++ b/scss/uikit/components/list.scss @@ -0,0 +1,187 @@ +// Name: List +// Description: Styles for lists +// +// Component: `uk-list` +// +// Modifiers: `uk-list-divider` +// `uk-list-striped` +// `uk-list-bullet` +// `uk-list-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$list-margin-top: $global-small-margin !default; + +$list-nested-padding-left: $global-gutter !default; + +$list-divider-margin-top: $global-small-margin !default; +$list-divider-border-width: $global-border-width !default; +$list-divider-border: $global-border !default; + +$list-striped-padding-vertical: $global-small-margin !default; +$list-striped-padding-horizontal: $global-small-margin !default; +$list-striped-background: $global-muted-background !default; + +$list-bullet-width: ($global-line-height * 1em) !default; +$list-bullet-height: $list-bullet-width !default; +$list-bullet-margin-right: $global-small-margin !default; +$list-bullet-icon-color: $global-color !default; + +$list-large-margin-top: $global-margin !default; +$list-large-divider-margin-top: $global-margin !default; +$list-large-striped-padding-vertical: $global-margin !default; +$list-large-striped-padding-horizontal: $global-small-margin !default; + +$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; + + +/* ======================================================================== + Component: List + ========================================================================== */ + +.uk-list { + padding: 0; + list-style: none; +} + +/* + * Micro clearfix + */ + +.uk-list > li::before, +.uk-list > li::after { + content: ""; + display: table; +} + +.uk-list > li::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-list > li > :last-child { margin-bottom: 0; } + +/* + * Nested lists + */ + +.uk-list ul { + margin: 0; + padding-left: $list-nested-padding-left; + list-style: none; +} + +/* + * Style + */ + +.uk-list > li:nth-child(n+2), +.uk-list > li > ul { margin-top: $list-margin-top; } + + +/* Style modifiers + ========================================================================== */ + +/* + * Divider + */ + +.uk-list-divider > li:nth-child(n+2) { + margin-top: $list-divider-margin-top; + padding-top: $list-divider-margin-top; + border-top: $list-divider-border-width solid $list-divider-border; + @if(mixin-exists(hook-list-divider)) {@include hook-list-divider();} +} + +/* + * Striped + */ + +.uk-list-striped > li { + padding: $list-striped-padding-vertical $list-striped-padding-horizontal; + @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();} +} + +.uk-list-striped > li:nth-of-type(odd) { background: $list-striped-background; } + +.uk-list-striped > li:nth-child(n+2) { margin-top: 0; } + +/* + * Bullet + */ + +.uk-list-bullet > li { + position: relative; + padding-left: unquote('calc(#{$list-bullet-width} + #{$list-bullet-margin-right})'); +} + +.uk-list-bullet > li::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: $list-bullet-width; + height: $list-bullet-height; + @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color); + background-repeat: no-repeat; + background-position: 50% 50%; + float: left; + @if(mixin-exists(hook-list-bullet)) {@include hook-list-bullet();} +} + + +/* Size modifier + ========================================================================== */ + +.uk-list-large > li:nth-child(n+2), +.uk-list-large > li > ul { margin-top: $list-large-margin-top; } + +/* + * Divider + */ + +.uk-list-large.uk-list-divider > li:nth-child(n+2) { + margin-top: $list-large-divider-margin-top; + padding-top: $list-large-divider-margin-top; +} + +/* + * Striped + */ + +.uk-list-large.uk-list-striped > li { + padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; + @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();} +} + +.uk-list-large.uk-list-striped > li:nth-child(n+2) { margin-top: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-list-misc)) {@include hook-list-misc();} + +// @mixin hook-list-divider(){} +// @mixin hook-list-striped(){} +// @mixin hook-list-bullet(){} +// @mixin hook-list-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-list-divider-border: $inverse-global-border !default; +$inverse-list-striped-background: $inverse-global-muted-background !default; +$inverse-list-bullet-icon-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-list-divider(){} +// @mixin hook-inverse-list-striped(){} +// @mixin hook-inverse-list-bullet(){} diff --git a/scss/uikit/components/margin.scss b/scss/uikit/components/margin.scss new file mode 100644 index 00000000..c3b13691 --- /dev/null +++ b/scss/uikit/components/margin.scss @@ -0,0 +1,163 @@ +// Name: Margin +// Description: Utilities for margins +// +// Component: `uk-margin-*` +// `uk-margin-small-*` +// `uk-margin-medium-*` +// `uk-margin-large-*` +// `uk-margin-xlarge-*` +// `uk-margin-remove-*` +// `uk-margin-auto-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$margin-margin: $global-margin !default; + +$margin-small-margin: $global-small-margin !default; + +$margin-medium-margin: $global-medium-margin !default; + +$margin-large-margin: $global-medium-margin !default; +$margin-large-margin-l: $global-large-margin !default; + +$margin-xlarge-margin: $global-large-margin !default; +$margin-xlarge-margin-l: $global-xlarge-margin !default; + + +/* ======================================================================== + Component: Margin + ========================================================================== */ + +/* + * Default + */ + +.uk-margin { margin-bottom: $margin-margin; } +* + .uk-margin { margin-top: $margin-margin !important; } + +.uk-margin-top { margin-top: $margin-margin !important; } +.uk-margin-bottom { margin-bottom: $margin-margin !important; } +.uk-margin-left { margin-left: $margin-margin !important; } +.uk-margin-right { margin-right: $margin-margin !important; } + + +/* Small + ========================================================================== */ + +.uk-margin-small { margin-bottom: $margin-small-margin; } +* + .uk-margin-small { margin-top: $margin-small-margin !important; } + +.uk-margin-small-top { margin-top: $margin-small-margin !important; } +.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; } +.uk-margin-small-left { margin-left: $margin-small-margin !important; } +.uk-margin-small-right { margin-right: $margin-small-margin !important; } + + +/* Medium + ========================================================================== */ + +.uk-margin-medium { margin-bottom: $margin-medium-margin; } +* + .uk-margin-medium { margin-top: $margin-medium-margin !important; } + +.uk-margin-medium-top { margin-top: $margin-medium-margin !important; } +.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; } +.uk-margin-medium-left { margin-left: $margin-medium-margin !important; } +.uk-margin-medium-right { margin-right: $margin-medium-margin !important; } + + +/* Large + ========================================================================== */ + +.uk-margin-large { margin-bottom: $margin-large-margin; } +* + .uk-margin-large { margin-top: $margin-large-margin !important; } + +.uk-margin-large-top { margin-top: $margin-large-margin !important; } +.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; } +.uk-margin-large-left { margin-left: $margin-large-margin !important; } +.uk-margin-large-right { margin-right: $margin-large-margin !important; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-margin-large { margin-bottom: $margin-large-margin-l; } + * + .uk-margin-large { margin-top: $margin-large-margin-l !important; } + + .uk-margin-large-top { margin-top: $margin-large-margin-l !important; } + .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; } + .uk-margin-large-left { margin-left: $margin-large-margin-l !important; } + .uk-margin-large-right { margin-right: $margin-large-margin-l !important; } + +} + + +/* XLarge + ========================================================================== */ + +.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; } +* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; } + +.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; } +.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; } +.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; } +.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; } + * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; } + + .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; } + .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; } + .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; } + .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; } + +} + + +/* Remove + ========================================================================== */ + +.uk-margin-remove { margin: 0 !important; } +.uk-margin-remove-top { margin-top: 0 !important; } +.uk-margin-remove-bottom { margin-bottom: 0 !important; } +.uk-margin-remove-left { margin-left: 0 !important; } +.uk-margin-remove-right { margin-right: 0 !important; } + +.uk-margin-remove-vertical { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.uk-margin-remove-adjacent + * { margin-top: 0 !important; } + + +/* Auto + ========================================================================== */ + +.uk-margin-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.uk-margin-auto-top { margin-top: auto !important; } +.uk-margin-auto-bottom { margin-bottom: auto !important; } +.uk-margin-auto-left { margin-left: auto !important; } +.uk-margin-auto-right { margin-right: auto !important; } + +.uk-margin-auto-vertical { + margin-top: auto !important; + margin-bottom: auto !important; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();} + +// @mixin hook-margin-misc(){} diff --git a/scss/uikit/components/marker.scss b/scss/uikit/components/marker.scss new file mode 100644 index 00000000..97e43609 --- /dev/null +++ b/scss/uikit/components/marker.scss @@ -0,0 +1,63 @@ +// Name: Marker +// Description: Component to create a marker icon +// +// Component: `uk-marker` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$marker-padding: 5px !default; +$marker-background: $global-secondary-background !default; +$marker-color: $global-inverse-color !default; + +$marker-hover-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Marker + ========================================================================== */ + +/* + * Addopts `uk-icon` + */ + +.uk-marker { + padding: $marker-padding; + background: $marker-background; + color: $marker-color; + @if(mixin-exists(hook-marker)) {@include hook-marker();} +} + +/* Hover + Focus */ +.uk-marker:hover, +.uk-marker:focus { + color: $marker-hover-color; + outline: none; + @if(mixin-exists(hook-marker-hover)) {@include hook-marker-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-marker-misc)) {@include hook-marker-misc();} + +// @mixin hook-marker(){} +// @mixin hook-marker-hover(){} +// @mixin hook-marker-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-marker-background: $global-muted-background !default; +$inverse-marker-color: $global-color !default; +$inverse-marker-hover-color: $global-color !default; + + + +// @mixin hook-inverse-marker(){} +// @mixin hook-inverse-marker-hover(){} diff --git a/scss/uikit/components/mixin.scss b/scss/uikit/components/mixin.scss new file mode 100644 index 00000000..5ed438a5 --- /dev/null +++ b/scss/uikit/components/mixin.scss @@ -0,0 +1,32 @@ +// +// Component: Mixin +// Description: Defines mixins which are used across all components +// +// ======================================================================== + + +// SVG +// ======================================================================== + +/// Replace `$search` with `$replace` in `$string` +/// @author Hugo Giraudel +/// @param {String} $string - Initial string +/// @param {String} $search - Substring to replace +/// @param {String} $replace ('') - New value +/// @return {String} - Updated string +@function str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +@mixin svg-fill($src, $color-default, $color-new){ + + $replace-src: str-replace($src, $color-default, $color-new) !default; + $replace-src: str-replace($replace-src, "#", "%23"); + background-image: url(quote($replace-src)); +}
\ No newline at end of file diff --git a/scss/uikit/components/modal.scss b/scss/uikit/components/modal.scss new file mode 100644 index 00000000..863f008a --- /dev/null +++ b/scss/uikit/components/modal.scss @@ -0,0 +1,368 @@ +// Name: Modal +// Description: Component to create modal dialogs +// +// Component: `uk-modal` +// +// Sub-objects: `uk-modal-page` +// `uk-modal-dialog` +// `uk-modal-header` +// `uk-modal-body` +// `uk-modal-footer` +// `uk-modal-title` +// `uk-modal-close` +// +// Adopted: `uk-modal-close-default` +// `uk-modal-close-outside` +// `uk-modal-close-full` +// +// Modifiers: `uk-modal-container` +// `uk-modal-full` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$modal-z-index: $global-z-index + 10 !default; +$modal-background: rgba(0,0,0,0.6) !default; + +$modal-padding-horizontal: 15px !default; +$modal-padding-horizontal-s: $global-gutter !default; +$modal-padding-horizontal-m: $global-medium-gutter !default; +$modal-padding-vertical: $modal-padding-horizontal !default; +$modal-padding-vertical-s: 50px !default; + +$modal-dialog-width: 600px !default; +$modal-dialog-background: $global-background !default; + +$modal-container-width: 1200px !default; + +$modal-body-padding-horizontal: $global-gutter !default; +$modal-body-padding-vertical: $global-gutter !default; + +$modal-header-padding-horizontal: $global-gutter !default; +$modal-header-padding-vertical: ($modal-header-padding-horizontal / 2) !default; +$modal-header-background: $global-muted-background !default; + +$modal-footer-padding-horizontal: $global-gutter !default; +$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default; +$modal-footer-background: $global-muted-background !default; + +$modal-title-font-size: $global-xlarge-font-size !default; +$modal-title-line-height: 1.3 !default; + +$modal-close-position: $global-small-margin !default; +$modal-close-padding: 5px !default; + +$modal-close-outside-position: 0 !default; +$modal-close-outside-translate: 100% !default; +$modal-close-outside-color: lighten($global-inverse-color, 20%) !default; +$modal-close-outside-hover-color: $global-inverse-color !default; + + +/* ======================================================================== + Component: Modal + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + * 3. Allow scrolling for the modal dialog + * 4. Horizontal padding + * 5. Mask the background page + * 6. Fade-in transition + */ + +.uk-modal { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $modal-z-index; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* 4 */ + padding: $modal-padding-vertical $modal-padding-horizontal; + /* 5 */ + background: $modal-background; + /* 6 */ + opacity: 0; + transition: opacity 0.15s linear; + @if(mixin-exists(hook-modal)) {@include hook-modal();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-modal { padding: $modal-padding-vertical-s $modal-padding-horizontal-s; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-modal { + padding-left: $modal-padding-horizontal-m; + padding-right: $modal-padding-horizontal-m; + } + +} + +/* + * Open + */ + +.uk-modal.uk-open { opacity: 1; } + + +/* Page + ========================================================================== */ + +/* + * Prevent scrollbars + */ + +.uk-modal-page { overflow: hidden; } + + +/* Dialog + ========================================================================== */ + +/* + * 1. Create position context for spinner and close button + * 2. Dimensions + * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11 + * `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests + * 4. Style + * 5. Slide-in transition + */ + +.uk-modal-dialog { + /* 1 */ + position: relative; + /* 2 */ + box-sizing: border-box; + margin: 0 auto; + width: $modal-dialog-width; + /* 3 */ + max-width: unquote('calc(100% - 0.01px)') !important; + /* 4 */ + background: $modal-dialog-background; + /* 5 */ + opacity: 0; + transform: translateY(-100px); + transition: 0.3s linear; + transition-property: opacity, transform; + @if(mixin-exists(hook-modal-dialog)) {@include hook-modal-dialog();} +} + +/* + * Open + */ + +.uk-open > .uk-modal-dialog { + opacity: 1; + transform: translateY(0); +} + + +/* Size modifier + ========================================================================== */ + +/* + * Container size + * Take the same size as the Container component + */ + +.uk-modal-container .uk-modal-dialog { width: $modal-container-width; } + +/* + * Full size + * 1. Remove padding and background from modal + * 2. Reset all default declarations from modal dialog + */ + +/* 1 */ +.uk-modal-full { + padding: 0; + background: none; +} + +/* 2 */ +.uk-modal-full .uk-modal-dialog { + margin: 0; + width: 100%; + max-width: 100%; + transform: translateY(0); + @if(mixin-exists(hook-modal-full)) {@include hook-modal-full();} +} + + +/* Sections + ========================================================================== */ + +.uk-modal-body { + padding: $modal-body-padding-vertical $modal-body-padding-horizontal; + @if(mixin-exists(hook-modal-body)) {@include hook-modal-body();} +} + +.uk-modal-header { + padding: $modal-header-padding-vertical $modal-header-padding-horizontal; + background: $modal-header-background; + @if(mixin-exists(hook-modal-header)) {@include hook-modal-header();} +} + +.uk-modal-footer { + padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal; + background: $modal-footer-background; + @if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();} +} + +/* + * Micro clearfix + */ + +.uk-modal-body::before, +.uk-modal-body::after, +.uk-modal-header::before, +.uk-modal-header::after, +.uk-modal-footer::before, +.uk-modal-footer::after { + content: ""; + display: table; +} + +.uk-modal-body::after, +.uk-modal-header::after, +.uk-modal-footer::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-modal-body > :last-child, +.uk-modal-header > :last-child, +.uk-modal-footer > :last-child { margin-bottom: 0; } + + +/* Title + ========================================================================== */ + +.uk-modal-title { + font-size: $modal-title-font-size; + line-height: $modal-title-line-height; + @if(mixin-exists(hook-modal-title)) {@include hook-modal-title();} +} + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +[class*='uk-modal-close-'] { + position: absolute; + z-index: $modal-z-index; + top: $modal-close-position; + right: $modal-close-position; + padding: $modal-close-padding; + @if(mixin-exists(hook-modal-close)) {@include hook-modal-close();} +} + +/* + * Remove margin from adjacent element + */ + +[class*='uk-modal-close-']:first-child + * { margin-top: 0; } + +/* + * Hover + */ + +[class*='uk-modal-close-']:hover { + @if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();} +} + +/* + * Default + */ + +.uk-modal-close-default { + @if(mixin-exists(hook-modal-close-default)) {@include hook-modal-close-default();} +} + +.uk-modal-close-default:hover { + @if(mixin-exists(hook-modal-close-default-hover)) {@include hook-modal-close-default-hover();} +} + +/* + * Outside + * 1. Prevent scrollbar on small devices + */ + +.uk-modal-close-outside { + top: $modal-close-outside-position; + /* 1 */ + right: (-$modal-close-padding); + transform: translate(0, -($modal-close-outside-translate)); + color: $modal-close-outside-color; + @if(mixin-exists(hook-modal-close-outside)) {@include hook-modal-close-outside();} +} + +.uk-modal-close-outside:hover { + color: $modal-close-outside-hover-color; + @if(mixin-exists(hook-modal-close-outside-hover)) {@include hook-modal-close-outside-hover();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + /* 1 */ + .uk-modal-close-outside { + right: $modal-close-outside-position; + transform: translate($modal-close-outside-translate, -($modal-close-outside-translate)); + } + +} + +/* + * Full + */ + +.uk-modal-close-full { + @if(mixin-exists(hook-modal-close-full)) {@include hook-modal-close-full();} +} + +.uk-modal-close-full:hover { + @if(mixin-exists(hook-modal-close-full-hover)) {@include hook-modal-close-full-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-modal-misc)) {@include hook-modal-misc();} + +// @mixin hook-modal(){} +// @mixin hook-modal-dialog(){} +// @mixin hook-modal-full(){} +// @mixin hook-modal-header(){} +// @mixin hook-modal-body(){} +// @mixin hook-modal-footer(){} +// @mixin hook-modal-title(){} +// @mixin hook-modal-close(){} +// @mixin hook-modal-close-hover(){} +// @mixin hook-modal-close-default(){} +// @mixin hook-modal-close-default-hover(){} +// @mixin hook-modal-close-outside(){} +// @mixin hook-modal-close-outside-hover(){} +// @mixin hook-modal-close-full(){} +// @mixin hook-modal-close-full-hover(){} +// @mixin hook-modal-misc(){} diff --git a/scss/uikit/components/nav.scss b/scss/uikit/components/nav.scss new file mode 100644 index 00000000..9d990ca2 --- /dev/null +++ b/scss/uikit/components/nav.scss @@ -0,0 +1,357 @@ +// Name: Nav +// Description: Defines styles for list navigations +// +// Component: `uk-nav` +// +// Sub-objects: `uk-nav-header` +// `uk-nav-divider` +// `uk-nav-sub` +// +// Modifiers: `uk-nav-parent-icon` +// `uk-nav-default` +// `uk-nav-primary` +// `uk-nav-center` +// +// States: `uk-active` +// `uk-parent` +// `uk-open` +// `uk-touch` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$nav-item-padding-vertical: 5px !default; +$nav-item-padding-horizontal: 0 !default; + +$nav-sublist-padding-vertical: 5px !default; +$nav-sublist-padding-left: 15px !default; +$nav-sublist-deeper-padding-left: 15px !default; +$nav-sublist-item-padding-vertical: 2px !default; + +$nav-parent-icon-width: ($global-line-height * 1em) !default; +$nav-parent-icon-height: $nav-parent-icon-width !default; +$nav-parent-icon-color: $global-color !default; + +$nav-header-padding-vertical: $nav-item-padding-vertical !default; +$nav-header-padding-horizontal: $nav-item-padding-horizontal !default; +$nav-header-font-size: $global-small-font-size !default; +$nav-header-text-transform: uppercase !default; +$nav-header-margin-top: $global-margin !default; + +$nav-divider-margin-vertical: 5px !default; +$nav-divider-margin-horizontal: 0 !default; + +$nav-default-item-color: $global-muted-color !default; +$nav-default-item-hover-color: $global-color !default; +$nav-default-item-active-color: $global-emphasis-color !default; +$nav-default-header-color: $global-emphasis-color !default; +$nav-default-divider-border-width: $global-border-width !default; +$nav-default-divider-border: $global-border !default; +$nav-default-sublist-item-color: $global-muted-color !default; +$nav-default-sublist-item-hover-color: $global-color !default; + +$nav-primary-item-font-size: $global-large-font-size !default; +$nav-primary-item-line-height: $global-line-height !default; +$nav-primary-item-color: $global-muted-color !default; +$nav-primary-item-hover-color: $global-color !default; +$nav-primary-item-active-color: $global-emphasis-color !default; +$nav-primary-header-color: $global-emphasis-color !default; +$nav-primary-divider-border-width: $global-border-width !default; +$nav-primary-divider-border: $global-border !default; +$nav-primary-sublist-item-color: $global-muted-color !default; +$nav-primary-sublist-item-hover-color: $global-color !default; + +$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; +$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; + + +/* ======================================================================== + Component: Nav + ========================================================================== */ + +/* + * Reset + * 1. Prepare lists + * 2. Prepare links + * 3. Remove default focus style + */ + +/* 1 */ +.uk-nav, +.uk-nav ul { + margin: 0; + padding: 0; + list-style: none; +} + +/* 2 */ +.uk-nav li > a { + display: block; + text-decoration: none; +} + +/* 3 */ +.uk-nav li > a:focus { outline: none; } + +/* + * Items + * Must target `a` elements to exclude other elements (e.g. lists) + */ + +.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; } + + +/* Sublists + ========================================================================== */ + +/* + * Level 2 + * `ul` needed for higher specificity to override padding + */ + +ul.uk-nav-sub { + padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left; + @if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();} +} + +/* + * Level 3 and deeper + */ + +.uk-nav-sub ul { padding-left: $nav-sublist-deeper-padding-left; } + +/* + * Items + */ + +.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; } + + +/* Parent icon modifier + ========================================================================== */ + +.uk-nav-parent-icon > .uk-parent > a::after { + content: ""; + width: $nav-parent-icon-width; + height: $nav-parent-icon-height; + float: right; + @include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color); + background-repeat: no-repeat; + background-position: 50% 50%; + @if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();} +} + +.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $nav-parent-icon-color); } + + +/* Header + ========================================================================== */ + +.uk-nav-header { + padding: $nav-header-padding-vertical $nav-header-padding-horizontal; + text-transform: $nav-header-text-transform; + font-size: $nav-header-font-size; + @if(mixin-exists(hook-nav-header)) {@include hook-nav-header();} +} + +.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; } + + +/* Divider + ========================================================================== */ + +.uk-nav-divider { + margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal; + @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();} +} + + +/* Default modifier + ========================================================================== */ + +.uk-nav-default { + @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();} +} + +/* + * Items + */ + +.uk-nav-default > li > a { + color: $nav-default-item-color; + @if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();} +} + +/* Hover + Focus */ +.uk-nav-default > li > a:hover, +.uk-nav-default > li > a:focus { + color: $nav-default-item-hover-color; + @if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();} +} + +/* Active */ +.uk-nav-default > li.uk-active > a { + color: $nav-default-item-active-color; + @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();} +} + +/* + * Header + */ + +.uk-nav-default .uk-nav-header { + color: $nav-default-header-color; + @if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();} +} + +/* + * Divider + */ + +.uk-nav-default .uk-nav-divider { + border-top: $nav-default-divider-border-width solid $nav-default-divider-border; + @if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();} +} + +/* + * Sublists + */ + +.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; } + +.uk-nav-default .uk-nav-sub a:hover, +.uk-nav-default .uk-nav-sub a:focus { color: $nav-default-sublist-item-hover-color; } + + +/* Primary modifier + ========================================================================== */ + +.uk-nav-primary { + @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();} +} + +/* + * Items + */ + +.uk-nav-primary > li > a { + font-size: $nav-primary-item-font-size; + line-height: $nav-primary-item-line-height; + color: $nav-primary-item-color; + @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();} +} + +/* Hover + Focus */ +.uk-nav-primary > li > a:hover, +.uk-nav-primary > li > a:focus { + color: $nav-primary-item-hover-color; + @if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();} +} + +/* Active */ +.uk-nav-primary > li.uk-active > a { + color: $nav-primary-item-active-color; + @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();} +} + +/* + * Header + */ + +.uk-nav-primary .uk-nav-header { + color: $nav-primary-header-color; + @if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();} +} + +/* + * Divider + */ + +.uk-nav-primary .uk-nav-divider { + border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border; + @if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();} +} + +/* + * Sublists + */ + +.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; } + +.uk-nav-primary .uk-nav-sub a:hover, +.uk-nav-primary .uk-nav-sub a:focus { color: $nav-primary-sublist-item-hover-color; } + + +/* Alignment modifier + ========================================================================== */ + +.uk-nav-center { text-align: center; } + +/* Sublists */ +.uk-nav-center .uk-nav-sub, +.uk-nav-center .uk-nav-sub ul { padding-left: 0; } + +/* Parent icon modifier */ +.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { position: absolute; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();} + +// @mixin hook-nav-sub(){} +// @mixin hook-nav-parent-icon(){} +// @mixin hook-nav-header(){} +// @mixin hook-nav-divider(){} +// @mixin hook-nav-default(){} +// @mixin hook-nav-default-item(){} +// @mixin hook-nav-default-item-hover(){} +// @mixin hook-nav-default-item-active(){} +// @mixin hook-nav-default-header(){} +// @mixin hook-nav-default-divider(){} +// @mixin hook-nav-primary(){} +// @mixin hook-nav-primary-item(){} +// @mixin hook-nav-primary-item-hover(){} +// @mixin hook-nav-primary-item-active(){} +// @mixin hook-nav-primary-header(){} +// @mixin hook-nav-primary-divider(){} +// @mixin hook-nav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-nav-parent-icon-color: $inverse-global-color !default; +$inverse-nav-default-item-color: $inverse-global-muted-color !default; +$inverse-nav-default-item-hover-color: $inverse-global-color !default; +$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default; +$inverse-nav-default-header-color: $inverse-global-emphasis-color !default; +$inverse-nav-default-divider-border: $inverse-global-border !default; +$inverse-nav-default-sublist-item-color: $inverse-global-muted-color !default; +$inverse-nav-default-sublist-item-hover-color: $inverse-global-color !default; + +$inverse-nav-primary-item-color: $inverse-global-muted-color !default; +$inverse-nav-primary-item-hover-color: $inverse-global-color !default; +$inverse-nav-primary-item-active-color: $inverse-global-emphasis-color !default; +$inverse-nav-primary-header-color: $inverse-global-emphasis-color !default; +$inverse-nav-primary-divider-border: $inverse-global-border !default; +$inverse-nav-primary-sublist-item-color: $inverse-global-muted-color !default; +$inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-nav-parent-icon(){} +// @mixin hook-inverse-nav-default-item(){} +// @mixin hook-inverse-nav-default-item-hover(){} +// @mixin hook-inverse-nav-default-item-active(){} +// @mixin hook-inverse-nav-default-header(){} +// @mixin hook-inverse-nav-default-divider(){} +// @mixin hook-inverse-nav-primary-item(){} +// @mixin hook-inverse-nav-primary-item-hover(){} +// @mixin hook-inverse-nav-primary-item-active(){} +// @mixin hook-inverse-nav-primary-header(){} +// @mixin hook-inverse-nav-primary-divider(){} diff --git a/scss/uikit/components/navbar.scss b/scss/uikit/components/navbar.scss new file mode 100644 index 00000000..a1f633a3 --- /dev/null +++ b/scss/uikit/components/navbar.scss @@ -0,0 +1,537 @@ +// Name: Navbar +// Description: Component to create horizontal navigation bars +// +// Component: `uk-navbar` +// +// Sub-objects: `uk-navbar-container` +// `uk-navbar-left` +// `uk-navbar-right` +// `uk-navbar-center` +// `uk-navbar-center-left` +// `uk-navbar-center-right` +// `uk-navbar-nav` +// `uk-navbar-item` +// `uk-navbar-toggle` +// `uk-navbar-subtitle` +// `uk-navbar-dropbar` +// +// Adopted: `uk-navbar-dropdown` + Modifiers +// `uk-navbar-dropdown-nav` +// `uk-navbar-dropdown-grid` +// `uk-navbar-toggle-icon` +// +// Modifiers: `uk-navbar-transparent` +// `uk-navbar-sticky` +// `uk-navbar-dropdown-stack` +// +// States: `uk-active` +// `uk-parent` +// `uk-open` +// +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$navbar-background: $global-muted-background !default; +$navbar-color-mode: none !default; + +$navbar-nav-item-height: 80px !default; +$navbar-nav-item-padding-horizontal: 15px !default; +$navbar-nav-item-color: $global-muted-color !default; +$navbar-nav-item-font-size: $global-font-size !default; +$navbar-nav-item-font-family: $global-font-family !default; +$navbar-nav-item-hover-color: $global-color !default; +$navbar-nav-item-onclick-color: $global-emphasis-color !default; +$navbar-nav-item-active-color: $global-emphasis-color !default; + +$navbar-item-color: $global-color !default; + +$navbar-toggle-color: $global-muted-color !default; +$navbar-toggle-hover-color: $global-color !default; + +$navbar-subtitle-font-size: $global-small-font-size !default; + +$navbar-dropdown-z-index: $global-z-index + 20 !default; +$navbar-dropdown-width: 200px !default; +$navbar-dropdown-margin: 0 !default; +$navbar-dropdown-padding: 15px !default; +$navbar-dropdown-background: $global-muted-background !default; +$navbar-dropdown-color: $global-color !default; +$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default; +$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default; + +$navbar-dropdown-dropbar-margin-top: 0 !default; +$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default; + +$navbar-dropdown-nav-item-color: $global-muted-color !default; +$navbar-dropdown-nav-item-hover-color: $global-color !default; +$navbar-dropdown-nav-item-active-color: $global-emphasis-color !default; +$navbar-dropdown-nav-header-color: $global-emphasis-color !default; +$navbar-dropdown-nav-divider-border-width: $global-border-width !default; +$navbar-dropdown-nav-divider-border: $global-border !default; +$navbar-dropdown-nav-sublist-item-color: $global-muted-color !default; +$navbar-dropdown-nav-sublist-item-hover-color: $global-color !default; + +$navbar-dropbar-background: $navbar-dropdown-background !default; +$navbar-dropbar-z-index: $global-z-index - 20 !default; + + +/* ======================================================================== + Component: Navbar + ========================================================================== */ + +/* + * 1. Create position context to center navbar group + */ + +.uk-navbar { + display: flex; + /* 1 */ + position: relative; + @if(mixin-exists(hook-navbar)) {@include hook-navbar();} +} + + +/* Container + ========================================================================== */ + +.uk-navbar-container:not(.uk-navbar-transparent) { + background: $navbar-background; + @if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();} +} + +// Color Mode +@if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} } +@if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} } + +/* + * Remove pseudo elements created by micro clearfix as precaution (if Container component is used) + */ + +.uk-navbar-container > ::before, +.uk-navbar-container > ::after { display: none !important; } + + +/* Groups + ========================================================================== */ + +/* + * 1. Align navs and items vertically if they have a different height + * 2. Note: IE 11 requires an extra `div` which affects the center selector + */ + +.uk-navbar-left, +.uk-navbar-right, +// 2. [class*='uk-navbar-center'], +.uk-navbar-center, +.uk-navbar-center-left > *, +.uk-navbar-center-right > * { + display: flex; + /* 1 */ + align-items: center; +} + +/* + * Horizontal alignment + * 1. Create position context for centered navbar with sub groups (left/right) + * 2. Needed for dropdowns because a new position context is created + * `z-index` must be smaller than off-canvas + * 3. Fix text wrapping if the centered section is larger than 50% of the navbar + * 4. Align sub groups for centered navbar + */ + +.uk-navbar-right { margin-left: auto; } + +.uk-navbar-center:only-child { + margin-left: auto; + margin-right: auto; + /* 1 */ + position: relative; +} + +.uk-navbar-center:not(:only-child) { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + /* 2 */ + z-index: $global-z-index - 10; +} + +/* 3 */ +.uk-navbar-center:not(:only-child) .uk-navbar-nav > li > a, +.uk-navbar-center:not(:only-child) .uk-navbar-item, +.uk-navbar-center:not(:only-child) .uk-navbar-toggle { white-space: nowrap; } + +/* 4 */ +.uk-navbar-center-left, +.uk-navbar-center-right { + position: absolute; + top: 0; +} + +.uk-navbar-center-left { right: 100%; } +.uk-navbar-center-right { left: 100%; } + +[class*='uk-navbar-center-'] .uk-navbar-nav > li > a, +[class*='uk-navbar-center-'] .uk-navbar-item, +[class*='uk-navbar-center-'] .uk-navbar-toggle { white-space: nowrap; } + + +/* Nav + ========================================================================== */ + +/* + * 1. Reset list + */ + +.uk-navbar-nav { + display: flex; + /* 1 */ + margin: 0; + padding: 0; + list-style: none; +} + +/* + * Allow items to wrap into the next line + * Only not `absolute` positioned groups + */ + +.uk-navbar-left, +.uk-navbar-right, +.uk-navbar-center:only-child { flex-wrap: wrap; } + +/* + * Items + * 1. Center content vertically and horizontally + * 2. Dimensions + * 3. Style + * 4. Required for `a` + */ + +.uk-navbar-nav > li > a, // Nav item +.uk-navbar-item, // Content item +.uk-navbar-toggle { // Clickable item + /* 1 */ + display: flex; + justify-content: center; + align-items: center; + /* 2 */ + box-sizing: border-box; + height: $navbar-nav-item-height; + padding: 0 $navbar-nav-item-padding-horizontal; + /* 3 */ + font-size: $navbar-nav-item-font-size; + font-family: $navbar-nav-item-font-family; + /* 4 */ + text-decoration: none; +} + +/* + * Nav items + */ + +.uk-navbar-nav > li > a { + color: $navbar-nav-item-color; + @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();} +} + +/* + * Hover + * Apply hover style also to focus state and if dropdown is opened + */ + +.uk-navbar-nav > li:hover > a, +.uk-navbar-nav > li > a:focus, +.uk-navbar-nav > li > a.uk-open { + color: $navbar-nav-item-hover-color; + outline: none; + @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();} +} + +/* OnClick */ +.uk-navbar-nav > li > a:active { + color: $navbar-nav-item-onclick-color; + @if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();} +} + +/* Active */ +.uk-navbar-nav > li.uk-active > a { + color: $navbar-nav-item-active-color; + @if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();} +} + + +/* Item + ========================================================================== */ + +.uk-navbar-item { + color: $navbar-item-color; + @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();} +} + + +/* Toggle + ========================================================================== */ + +.uk-navbar-toggle { + color: $navbar-toggle-color; + @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();} +} + +.uk-navbar-toggle:hover, +.uk-navbar-toggle:focus, +.uk-navbar-toggle.uk-open { + color: $navbar-toggle-hover-color; + outline: none; + text-decoration: none; + @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();} +} + +/* + * Icon + * Adopts `uk-icon` + */ + +.uk-navbar-toggle-icon { + @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();} +} + +/* Hover + Focus */ +:hover > .uk-navbar-toggle-icon, +:focus > .uk-navbar-toggle-icon { + @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();} +} + + +/* Subtitle + ========================================================================== */ + +.uk-navbar-subtitle { + font-size: $navbar-subtitle-font-size; + @if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();} +} + + +/* Style modifiers + ========================================================================== */ + +.uk-navbar-transparent { + @if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();} +} + +.uk-navbar-sticky { + @if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();} +} + + +/* Dropdown + ========================================================================== */ + +/* + * Adopts `uk-dropdown` + * 1. Hide by default + * 2. Set position + * 3. Set a default width + * 4. Style + */ + +.uk-navbar-dropdown { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: $navbar-dropdown-z-index; + /* 3 */ + box-sizing: border-box; + width: $navbar-dropdown-width; + /* 4 */ + padding: $navbar-dropdown-padding; + background: $navbar-dropdown-background; + color: $navbar-dropdown-color; + @if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();} +} + +/* Show */ +.uk-navbar-dropdown.uk-open { display: block; } + +/* + * Direction / Alignment modifiers + */ + +/* Direction */ +[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); } +[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; } +[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); } +[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; } + +/* + * Grid + * Adopts `uk-grid` + */ + +/* Gutter Horizontal */ +.uk-navbar-dropdown-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); } +.uk-navbar-dropdown-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; } + +/* Gutter Vertical */ +.uk-navbar-dropdown-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; } + +/* Stack */ +.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { width: 100% !important; } + +/* + * Width modifier + */ + +.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 2); } +.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 3); } +.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); } +.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); } + +/* + * Dropbar modifier + */ + +.uk-navbar-dropdown-dropbar { + margin-top: $navbar-dropdown-dropbar-margin-top; + margin-bottom: $navbar-dropdown-dropbar-margin-bottom; + @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();} +} + + +/* Dropdown Nav + * Adopts `uk-nav` + ========================================================================== */ + +.uk-navbar-dropdown-nav { + @if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();} +} + +/* + * Items + */ + +.uk-navbar-dropdown-nav > li > a { + color: $navbar-dropdown-nav-item-color; + @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();} +} + +/* Hover + Focus */ +.uk-navbar-dropdown-nav > li > a:hover, +.uk-navbar-dropdown-nav > li > a:focus { + color: $navbar-dropdown-nav-item-hover-color; + @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();} +} + +/* Active */ +.uk-navbar-dropdown-nav > li.uk-active > a { + color: $navbar-dropdown-nav-item-active-color; + @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();} +} + +/* + * Header + */ + +.uk-navbar-dropdown-nav .uk-nav-header { + color: $navbar-dropdown-nav-header-color; + @if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();} +} + +/* + * Divider + */ + +.uk-navbar-dropdown-nav .uk-nav-divider { + border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border; + @if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();} +} + +/* + * Sublists + */ + +.uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; } + +.uk-navbar-dropdown-nav .uk-nav-sub a:hover, +.uk-navbar-dropdown-nav .uk-nav-sub a:focus { color: $navbar-dropdown-nav-sublist-item-hover-color; } + + +/* Dropbar + ========================================================================== */ + +.uk-navbar-dropbar { + background: $navbar-dropbar-background; + @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();} +} + +/* + * Slide modifier + */ + +.uk-navbar-dropbar-slide { + position: absolute; + z-index: $navbar-dropbar-z-index; + left: 0; + right: 0; + @if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();} + +// @mixin hook-navbar(){} +// @mixin hook-navbar-container(){} +// @mixin hook-navbar-nav-item(){} +// @mixin hook-navbar-nav-item-hover(){} +// @mixin hook-navbar-nav-item-onclick(){} +// @mixin hook-navbar-nav-item-active(){} +// @mixin hook-navbar-item(){} +// @mixin hook-navbar-toggle(){} +// @mixin hook-navbar-toggle-hover(){} +// @mixin hook-navbar-toggle-icon(){} +// @mixin hook-navbar-toggle-icon-hover(){} +// @mixin hook-navbar-subtitle(){} +// @mixin hook-navbar-transparent(){} +// @mixin hook-navbar-sticky(){} +// @mixin hook-navbar-dropdown(){} +// @mixin hook-navbar-dropdown-dropbar(){} +// @mixin hook-navbar-dropdown-nav(){} +// @mixin hook-navbar-dropdown-nav-item(){} +// @mixin hook-navbar-dropdown-nav-item-hover(){} +// @mixin hook-navbar-dropdown-nav-item-active(){} +// @mixin hook-navbar-dropdown-nav-header(){} +// @mixin hook-navbar-dropdown-nav-divider(){} +// @mixin hook-navbar-dropbar(){} +// @mixin hook-navbar-dropbar-slide(){} +// @mixin hook-navbar-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-navbar-nav-item-color: $inverse-global-muted-color !default; +$inverse-navbar-nav-item-hover-color: $inverse-global-color !default; +$inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default; +$inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color !default; +$inverse-navbar-item-color: $inverse-global-color !default; +$inverse-navbar-toggle-color: $inverse-global-muted-color !default; +$inverse-navbar-toggle-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-navbar-nav-item(){} +// @mixin hook-inverse-navbar-nav-item-hover(){} +// @mixin hook-inverse-navbar-nav-item-onclick(){} +// @mixin hook-inverse-navbar-nav-item-active(){} +// @mixin hook-inverse-navbar-item(){} +// @mixin hook-inverse-navbar-toggle(){} +// @mixin hook-inverse-navbar-toggle-hover(){} diff --git a/scss/uikit/components/notification.scss b/scss/uikit/components/notification.scss new file mode 100644 index 00000000..cc1ba552 --- /dev/null +++ b/scss/uikit/components/notification.scss @@ -0,0 +1,190 @@ +// Name: Notification +// Description: Component to create notification messages +// +// Component: `uk-notification` +// +// Sub-objects: `uk-notification-message` +// +// Adopted: `uk-notification-close` +// +// Modifiers: `uk-notification-top-center` +// `uk-notification-top-right` +// `uk-notification-bottom-left` +// `uk-notification-bottom-center` +// `uk-notification-bottom-right` +// `uk-notification-message-primary` +// `uk-notification-message-success` +// `uk-notification-message-warning` +// `uk-notification-message-danger` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$notification-position: 10px !default; +$notification-z-index: $global-z-index + 40 !default; +$notification-width: 350px !default; + +$notification-message-margin-bottom: 10px !default; +$notification-message-padding: $global-small-gutter !default; +$notification-message-background: $global-muted-background !default; +$notification-message-color: $global-color !default; +$notification-message-font-size: $global-medium-font-size !default; +$notification-message-line-height: 1.4 !default; + +$notification-close-top: $notification-message-padding + 5px !default; +$notification-close-right: $notification-message-padding !default; + +$notification-message-primary-color: $global-primary-background !default; +$notification-message-success-color: $global-success-background !default; +$notification-message-warning-color: $global-warning-background !default; +$notification-message-danger-color: $global-danger-background !default; + + +/* ======================================================================== + Component: Notification + ========================================================================== */ + +/* + * 1. Set position + * 2. Dimensions + */ + +.uk-notification { + /* 1 */ + position: fixed; + top: $notification-position; + left: $notification-position; + z-index: $notification-z-index; + /* 2 */ + box-sizing: border-box; + width: $notification-width; + @if(mixin-exists(hook-notification)) {@include hook-notification();} +} + + +/* Position modifiers +========================================================================== */ + +.uk-notification-top-right, +.uk-notification-bottom-right { + left: auto; + right: $notification-position; +} + +.uk-notification-top-center, +.uk-notification-bottom-center { + left: 50%; + margin-left: ($notification-width / -2); +} + +.uk-notification-bottom-left, +.uk-notification-bottom-right, +.uk-notification-bottom-center { + top: auto; + bottom: $notification-position; +} + + +/* Responsiveness +========================================================================== */ + +/* Phones portrait and smaller */ +@media (max-width: $breakpoint-xsmall-max) { + + .uk-notification { + left: $notification-position; + right: $notification-position; + width: auto; + margin: 0; + } + +} + + +/* Message +========================================================================== */ + +.uk-notification-message { + position: relative; + margin-bottom: $notification-message-margin-bottom; + padding: $notification-message-padding; + background: $notification-message-background; + color: $notification-message-color; + font-size: $notification-message-font-size; + line-height: $notification-message-line-height; + cursor: pointer; + @if(mixin-exists(hook-notification-message)) {@include hook-notification-message();} +} + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +.uk-notification-close { + display: none; + position: absolute; + top: $notification-close-top; + right: $notification-close-right; + @if(mixin-exists(hook-notification-close)) {@include hook-notification-close();} +} + +.uk-notification-message:hover .uk-notification-close { display: block; } + + +/* Style modifiers + ========================================================================== */ + +/* + * Primary + */ + +.uk-notification-message-primary { + color: $notification-message-primary-color; + @if(mixin-exists(hook-notification-message-primary)) {@include hook-notification-message-primary();} +} + +/* + * Success + */ + +.uk-notification-message-success { + color: $notification-message-success-color; + @if(mixin-exists(hook-notification-message-success)) {@include hook-notification-message-success();} +} + +/* + * Warning + */ + +.uk-notification-message-warning { + color: $notification-message-warning-color; + @if(mixin-exists(hook-notification-message-warning)) {@include hook-notification-message-warning();} +} + +/* + * Danger + */ + +.uk-notification-message-danger { + color: $notification-message-danger-color; + @if(mixin-exists(hook-notification-message-danger)) {@include hook-notification-message-danger();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-notification-misc)) {@include hook-notification-misc();} + +// @mixin hook-notification(){} +// @mixin hook-notification-message(){} +// @mixin hook-notification-close(){} +// @mixin hook-notification-message-primary(){} +// @mixin hook-notification-message-success(){} +// @mixin hook-notification-message-warning(){} +// @mixin hook-notification-message-danger(){} +// @mixin hook-notification-misc(){} diff --git a/scss/uikit/components/offcanvas.scss b/scss/uikit/components/offcanvas.scss new file mode 100644 index 00000000..5fc05587 --- /dev/null +++ b/scss/uikit/components/offcanvas.scss @@ -0,0 +1,301 @@ +// Name: Off-canvas +// Description: Component to create an off-canvas sidebar +// +// Component: `uk-offcanvas` +// +// Sub-objects: `uk-offcanvas-bar` +// `uk-offcanvas-container` +// `uk-offcanvas-content` +// `uk-offcanvas-page` +// +// Adopted: `uk-offcanvas-close` +// +// Modifiers: `uk-offcanvas-flip` +// `uk-offcanvas-bar-animation` +// `uk-offcanvas-reveal` +// `uk-offcanvas-overlay` +// `uk-offcanvas-content-animation` +// +// States: `uk-open` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$offcanvas-z-index: $global-z-index !default; + +$offcanvas-bar-width: 270px !default; +$offcanvas-bar-padding-vertical: $global-margin !default; +$offcanvas-bar-padding-horizontal: $global-margin !default; +$offcanvas-bar-background: $global-secondary-background !default; +$offcanvas-bar-color-mode: light !default; + +$offcanvas-bar-width-m: 350px !default; +$offcanvas-bar-padding-vertical-m: $global-medium-gutter !default; +$offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default; + +$offcanvas-close-position: 20px !default; +$offcanvas-close-padding: 5px !default; + +$offcanvas-overlay-background: rgba(0,0,0,0.1) !default; + + +/* ======================================================================== + Component: Off-canvas + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Set position + */ + +.uk-offcanvas { + /* 1 */ + display: none; + /* 2 */ + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: $offcanvas-z-index; +} + +/* + * Flip modifier + */ + +.uk-offcanvas-flip .uk-offcanvas { + right: 0; + left: auto; +} + + +/* Bar + ========================================================================== */ + +/* + * 1. Set position + * 2. Size and style + * 3. Allow scrolling + * 4. Transform + */ + +.uk-offcanvas-bar { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + box-sizing: border-box; + width: $offcanvas-bar-width; + padding: $offcanvas-bar-padding-vertical $offcanvas-bar-padding-horizontal; + background: $offcanvas-bar-background; + /* 3 */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* 4 */ + transform: translateX(-100%); + @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();} +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-offcanvas-bar { + width: $offcanvas-bar-width-m; + padding: $offcanvas-bar-padding-vertical-m $offcanvas-bar-padding-horizontal-m; + } + +} + +// Color Mode +@if ( $offcanvas-bar-color-mode == light ) { .uk-offcanvas-bar { @extend .uk-light !optional;} } +@if ( $offcanvas-bar-color-mode == dark ) { .uk-offcanvas-bar { @extend .uk-dark !optional;} } + +/* Flip modifier */ +.uk-offcanvas-flip .uk-offcanvas-bar { + left: auto; + right: 0; + transform: translateX(100%); +} + +/* + * Open + */ + +.uk-open > .uk-offcanvas-bar { transform: translateX(0); } + +/* + * Slide Animation (Used in slide and push mode) + */ + +.uk-offcanvas-bar-animation { transition: transform 0.3s ease-out; } + +/* + * Reveal Animation + * 1. Set position + * 2. Clip the bar + * 3. Animation + * 4. Reset transform + */ + +.uk-offcanvas-reveal { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + width: 0; + overflow: hidden; + /* 3 */ + transition: width 0.3s ease-out; +} + +.uk-offcanvas-reveal .uk-offcanvas-bar { + /* 4 */ + transform: translateX(0); +} + +.uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width; } + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-open > .uk-offcanvas-reveal { width: $offcanvas-bar-width-m; } + +} + +/* + * Flip modifier + */ + +.uk-offcanvas-flip .uk-offcanvas-reveal { + right: 0; + left: auto; +} + + +/* Close + * Adopts `uk-close` + ========================================================================== */ + +.uk-offcanvas-close { + position: absolute; + z-index: $offcanvas-z-index; + top: $offcanvas-close-position; + right: $offcanvas-close-position; + padding: $offcanvas-close-padding; + @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();} +} + + +/* Overlay + ========================================================================== */ + +/* + * Overlay the whole page. Needed for the `::before` + * 1. Using `100vw` so no modification is needed when off-canvas is flipped + * 2. Allow for closing with swipe gesture on devices with pointer events. + */ + +.uk-offcanvas-overlay { + /* 1 */ + width: 100vw; + /* 2 */ + touch-action: none; +} + +/* + * 1. Mask the whole page + * 2. Fade-in transition + */ + +.uk-offcanvas-overlay::before { + /* 1 */ + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $offcanvas-overlay-background; + /* 2 */ + opacity: 0; + transition: opacity 0.15s linear; + @if(mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();} +} + +.uk-offcanvas-overlay.uk-open::before { opacity: 1; } + + +/* Container + ========================================================================== */ + +/* + * Prevent horizontal scrollbar when the content is slide-out + * Has to be on the `html` element too to make it work on the `body` + */ + +.uk-offcanvas-page, +.uk-offcanvas-container { overflow-x: hidden; } + +/* + * Prevent all scrollbars if overlay is used + */ + +.uk-offcanvas-container-overlay { overflow: hidden; } + + +/* Content + ========================================================================== */ + +/* + * Prepare slide-out animation (Used in reveal and push mode) + * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars + * lose their fixed state and behaves like `absolute` within a transformed container + * Note: JS sets a fixed width and height so the page can slide-out without shrinking + * 1. Smooth scrolling + */ + +.uk-offcanvas-container .uk-offcanvas-content { + position: relative; + left: 0; + transition: left 0.3s ease-out; + /* 1 */ + -webkit-overflow-scrolling: touch; +} + +/* Disable scrolling if overlay mode */ +.uk-offcanvas-overlay .uk-offcanvas-content { overflow-y: hidden; } + +/* + * Activate slide-out animation + */ + +:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width; } + +.uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width); } + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + :not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: $offcanvas-bar-width-m; } + + .uk-offcanvas-flip > .uk-offcanvas-content-animation { left: (-$offcanvas-bar-width-m); } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();} + +// @mixin hook-offcanvas-bar(){} +// @mixin hook-offcanvas-close(){} +// @mixin hook-offcanvas-overlay(){} +// @mixin hook-offcanvas-misc(){} diff --git a/scss/uikit/components/overlay.scss b/scss/uikit/components/overlay.scss new file mode 100644 index 00000000..c3eb0a57 --- /dev/null +++ b/scss/uikit/components/overlay.scss @@ -0,0 +1,85 @@ +// Name: Overlay +// Description: Component to create content areas overlaying an image +// +// Component: `uk-overlay` +// +// Adopted: `uk-overlay-icon` +// +// Modifier: `uk-overlay-default` +// `uk-overlay-primary` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$overlay-padding-horizontal: $global-gutter !default; +$overlay-padding-vertical: $global-gutter !default; + +$overlay-default-background: rgba($global-background, 0.8) !default; + +$overlay-primary-background: rgba($global-secondary-background, 0.8) !default; +$overlay-primary-color-mode: light !default; + + +/* ======================================================================== + Component: Overlay + ========================================================================== */ + +.uk-overlay { + padding: $overlay-padding-vertical $overlay-padding-horizontal; + @if(mixin-exists(hook-overlay)) {@include hook-overlay();} +} + +/* + * Remove margin from the last-child + */ + +.uk-overlay > :last-child { margin-bottom: 0; } + + +/* Icon + ========================================================================== */ + +.uk-overlay-icon { + @if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();} +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-overlay-default { + background: $overlay-default-background; + @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();} +} + +/* + * Primary + */ + +.uk-overlay-primary { + background: $overlay-primary-background; + @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();} +} + +// Color Mode +@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light !optional;} } +@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark !optional;} } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();} + +// @mixin hook-overlay(){} +// @mixin hook-overlay-icon(){} +// @mixin hook-overlay-default(){} +// @mixin hook-overlay-primary(){} +// @mixin hook-overlay-misc(){} diff --git a/scss/uikit/components/padding.scss b/scss/uikit/components/padding.scss new file mode 100644 index 00000000..0c0f1ed1 --- /dev/null +++ b/scss/uikit/components/padding.scss @@ -0,0 +1,81 @@ +// Name: Padding +// Description: Utilities for padding +// +// Component: `uk-padding` +// `uk-padding-large` +// `uk-padding-remove-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$padding-padding: $global-gutter !default; +$padding-padding-l: $global-medium-gutter !default; + +$padding-small-padding: $global-small-gutter !default; + +$padding-large-padding: $global-gutter !default; +$padding-large-padding-l: $global-large-gutter !default; + + +/* ======================================================================== + Component: Padding + ========================================================================== */ + +.uk-padding { padding: $padding-padding; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-padding { padding: $padding-padding-l; } + +} + + +/* Small + ========================================================================== */ + +.uk-padding-small { padding: $padding-small-padding; } + + +/* Large + ========================================================================== */ + +.uk-padding-large { padding: $padding-large-padding; } + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-padding-large { padding: $padding-large-padding-l; } + +} + + +/* Remove + ========================================================================== */ + +.uk-padding-remove { padding: 0 !important; } +.uk-padding-remove-top { padding-top: 0 !important; } +.uk-padding-remove-bottom { padding-bottom: 0 !important; } +.uk-padding-remove-left { padding-left: 0 !important; } +.uk-padding-remove-right { padding-right: 0 !important; } + +.uk-padding-remove-vertical { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.uk-padding-remove-horizontal { + padding-left: 0 !important; + padding-right: 0 !important; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-padding-misc)) {@include hook-padding-misc();} + +// @mixin hook-padding-misc(){} diff --git a/scss/uikit/components/pagination.scss b/scss/uikit/components/pagination.scss new file mode 100644 index 00000000..5dce23ad --- /dev/null +++ b/scss/uikit/components/pagination.scss @@ -0,0 +1,128 @@ +// Name: Pagination +// Description: Component to create a page navigation +// +// Component: `uk-pagination` +// +// Adopted: `uk-pagination-next` +// `uk-pagination-previous` +// +// States: `uk-active` +// `uk-disabled` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$pagination-margin-horizontal: 20px !default; + +$pagination-item-color: $global-muted-color !default; +$pagination-item-hover-color: $global-color !default; +$pagination-item-hover-text-decoration: none !default; +$pagination-item-active-color: $global-color !default; +$pagination-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Pagination + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-pagination { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$pagination-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-pagination)) {@include hook-pagination();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-pagination > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $pagination-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ + +.uk-pagination > * > * { + /* 1 */ + display: block; + /* 2 */ + color: $pagination-item-color; + @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();} +} + +/* Hover + Focus */ +.uk-pagination > * > :hover, +.uk-pagination > * > :focus { + color: $pagination-item-hover-color; + text-decoration: $pagination-item-hover-text-decoration; + @if(mixin-exists(hook-pagination-item-hover)) {@include hook-pagination-item-hover();} +} + +/* Active */ +.uk-pagination > .uk-active > * { + color: $pagination-item-active-color; + @if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();} +} + +/* Disabled */ +.uk-pagination > .uk-disabled > * { + color: $pagination-item-disabled-color; + @if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-pagination-misc)) {@include hook-pagination-misc();} + +// @mixin hook-pagination(){} +// @mixin hook-pagination-item(){} +// @mixin hook-pagination-item-hover(){} +// @mixin hook-pagination-item-active(){} +// @mixin hook-pagination-item-disabled(){} +// @mixin hook-pagination-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-pagination-item-color: $inverse-global-muted-color !default; +$inverse-pagination-item-hover-color: $inverse-global-color !default; +$inverse-pagination-item-active-color: $inverse-global-color !default; +$inverse-pagination-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-pagination-item(){} +// @mixin hook-inverse-pagination-item-hover(){} +// @mixin hook-inverse-pagination-item-active(){} +// @mixin hook-inverse-pagination-item-disabled(){} diff --git a/scss/uikit/components/placeholder.scss b/scss/uikit/components/placeholder.scss new file mode 100644 index 00000000..05c06f7d --- /dev/null +++ b/scss/uikit/components/placeholder.scss @@ -0,0 +1,45 @@ +// Name: Placeholder +// Description: Component to create placeholder boxes +// +// Component: `uk-placeholder` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$placeholder-margin-vertical: $global-margin !default; +$placeholder-padding-vertical: $global-gutter !default; +$placeholder-padding-horizontal: $global-gutter !default; +$placeholder-background: $global-muted-background !default; + + +/* ======================================================================== + Component: Placeholder + ========================================================================== */ + +.uk-placeholder { + margin-bottom: $placeholder-margin-vertical; + padding: $placeholder-padding-vertical $placeholder-padding-horizontal; + background: $placeholder-background; + @if(mixin-exists(hook-placeholder)) {@include hook-placeholder();} +} + +/* Add margin if adjacent element */ +* + .uk-placeholder { margin-top: $placeholder-margin-vertical; } + +/* + * Remove margin from the last-child + */ + +.uk-placeholder > :last-child { margin-bottom: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-placeholder-misc)) {@include hook-placeholder-misc();} + +// @mixin hook-placeholder(){} +// @mixin hook-placeholder-misc(){}
\ No newline at end of file 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(){} diff --git a/scss/uikit/components/print.scss b/scss/uikit/components/print.scss new file mode 100644 index 00000000..6162df52 --- /dev/null +++ b/scss/uikit/components/print.scss @@ -0,0 +1,61 @@ +// Name: Print +// Description: Optimize page for printing +// +// Adapted from http://github.com/h5bp/html5-boilerplate +// +// Modifications: Removed link `href` and `title` related rules +// +// ======================================================================== + + +/* ======================================================================== + Component: Print + ========================================================================== */ + +@media print { + + *, + *::before, + *::after { + background: transparent !important; + color: black !important; + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { text-decoration: underline; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { display: table-header-group; } + + tr, + img { page-break-inside: avoid; } + + img { max-width: 100% !important; } + + @page { margin: 0.5cm; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { page-break-after: avoid; } + + @if(mixin-exists(hook-print)) {@include hook-print();} + +} + +// Hooks +// ======================================================================== + +// @mixin hook-print(){} diff --git a/scss/uikit/components/progress.scss b/scss/uikit/components/progress.scss new file mode 100644 index 00000000..4575513e --- /dev/null +++ b/scss/uikit/components/progress.scss @@ -0,0 +1,105 @@ +// Name: Progress +// Description: Component to create progress bars +// +// Component: `uk-progress` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$progress-height: 15px !default; +$progress-margin-vertical: $global-margin !default; +$progress-background: $global-muted-background !default; + +$progress-bar-background: $global-primary-background !default; + + +/* ======================================================================== + Component: Progress + ========================================================================== */ + +/* + * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 2. Remove default style + * 3. Behave like a block element + * 4. Remove borders in Firefox and Edge + * 5. Set background color for progress container in Firefox, IE11 and Edge + * 6. Style + */ + +.uk-progress { + /* 1 */ + vertical-align: baseline; + /* 2 */ + -webkit-appearance: none; + -moz-appearance: none; + /* 3 */ + display: block; + width: 100%; + /* 4 */ + border: 0; + /* 5 */ + background-color: $progress-background; + /* 6 */ + margin-bottom: $progress-margin-vertical; + height: $progress-height; + @if(mixin-exists(hook-progress)) {@include hook-progress();} +} + +/* Add margin if adjacent element */ +* + .uk-progress { margin-top: $progress-margin-vertical; } + +/* + * Remove animated circles for indeterminate state in IE11 and Edge + */ + +.uk-progress:indeterminate { color: transparent; } + +/* + * Progress container + * 2. Remove progress bar for indeterminate state in Firefox + */ + +.uk-progress::-webkit-progress-bar { + background-color: $progress-background; + @if(mixin-exists(hook-progress)) {@include hook-progress();} +} + +/* 2 */ +.uk-progress:indeterminate::-moz-progress-bar { width: 0; } + +/* + * Progress bar + * 1. Remove right border in IE11 and Edge + */ + +.uk-progress::-webkit-progress-value { + background-color: $progress-bar-background; + transition: width 0.6s ease; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + +.uk-progress::-moz-progress-bar { + background-color: $progress-bar-background; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + +.uk-progress::-ms-fill { + background-color: $progress-bar-background; + transition: width 0.6s ease; + /* 1 */ + border: 0; + @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-progress-misc)) {@include hook-progress-misc();} + +// @mixin hook-progress(){} +// @mixin hook-progress-bar(){} +// @mixin hook-progress-misc(){} diff --git a/scss/uikit/components/search.scss b/scss/uikit/components/search.scss new file mode 100644 index 00000000..a61002f5 --- /dev/null +++ b/scss/uikit/components/search.scss @@ -0,0 +1,328 @@ +// Name: Search +// Description: Component to create the search +// +// Component: `uk-search` +// +// Sub-objects: `uk-search-input` +// `uk-search-toggle` +// +// Adopted: `uk-search-icon` +// +// Modifier: `uk-search-default` +// `uk-search-navbar` +// `uk-search-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$search-color: $global-color !default; +$search-placeholder-color: $global-muted-color !default; + +$search-icon-color: $global-muted-color !default; + +$search-default-width: 180px !default; +$search-default-height: $global-control-height !default; +$search-default-padding-horizontal: 6px !default; +$search-default-background: $global-muted-background !default; +$search-default-focus-background: $search-default-background !default; + +$search-default-icon-width: $global-control-height !default; + +$search-navbar-width: 400px !default; +$search-navbar-height: 40px !default; +$search-navbar-background: transparent !default; +$search-navbar-font-size: $global-large-font-size !default; + +$search-navbar-icon-width: 40px !default; + +$search-large-width: 500px !default; +$search-large-height: 80px !default; +$search-large-background: transparent !default; +$search-large-font-size: $global-xxlarge-font-size !default; + +$search-large-icon-width: 80px !default; + +$search-toggle-color: $global-muted-color !default; +$search-toggle-hover-color: $global-color !default; + + +/* ======================================================================== + Component: Search + ========================================================================== */ + +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Reset `form` + */ + +.uk-search { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + margin: 0; +} + + +/* Input + ========================================================================== */ + +/* + * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. + */ + +.uk-search-input::-webkit-search-cancel-button, +.uk-search-input::-webkit-search-decoration { -webkit-appearance: none; } + +/* + * Removes placeholder transparency in Firefox. + */ + +.uk-search-input::-moz-placeholder { opacity: 1; } + +/* + * 1. Define consistent box sizing. + * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. + * 3. Remove `border-radius` in iOS. + * 4. Change font properties to `inherit` in all browsers + * 5. Show the overflow in Edge. + * 6. Remove default style in iOS. + * 7. Vertical alignment + * 8. Take the full container width + * 9. Style + */ + +.uk-search-input { + /* 1 */ + box-sizing: border-box; + /* 2 */ + margin: 0; + /* 3 */ + border-radius: 0; + /* 4 */ + font: inherit; + /* 5 */ + overflow: visible; + /* 6 */ + -webkit-appearance: none; + /* 7 */ + vertical-align: middle; + /* 8 */ + width: 100%; + /* 9 */ + border: none; + color: $search-color; + @if(mixin-exists(hook-search-input)) {@include hook-search-input();} +} + +.uk-search-input:focus { outline: none; } + +/* Placeholder */ +.uk-search-input:-ms-input-placeholder { color: $search-placeholder-color !important; } +.uk-search-input::placeholder { color: $search-placeholder-color; } + + +/* Icon (Adopts `uk-icon`) + ========================================================================== */ + +/* + * Remove default focus style + */ + +.uk-search-icon:focus { outline: none; } + +/* + * Position above input + * 1. Set position + * 2. Center icon vertically and horizontally + * 3. Style + */ + +.uk-search .uk-search-icon { + /* 1 */ + position: absolute; + top: 0; + bottom: 0; + left: 0; + /* 2 */ + display: inline-flex; + justify-content: center; + align-items: center; + /* 3 */ + color: $search-icon-color; +} + +/* + * Required for `a`. + */ + +.uk-search .uk-search-icon:hover { color: $search-icon-color; } + +/* + * Make `input` element clickable through icon, e.g. if it's a `span` + */ + +.uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; } + +/* + * Position modifier + */ + +.uk-search .uk-search-icon-flip { + right: 0; + left: auto; +} + + +/* Default modifier + ========================================================================== */ + +.uk-search-default { width: $search-default-width; } + +/* + * Input + */ + +.uk-search-default .uk-search-input { + height: $search-default-height; + padding-left: $search-default-padding-horizontal; + padding-right: $search-default-padding-horizontal; + background: $search-default-background; + @if(mixin-exists(hook-search-default-input)) {@include hook-search-default-input();} +} + +/* Focus */ +.uk-search-default .uk-search-input:focus { + background-color: $search-default-focus-background; + @if(mixin-exists(hook-search-default-input-focus)) {@include hook-search-default-input-focus();} +} + +/* + * Icon + */ + +.uk-search-default .uk-search-icon { width: $search-default-icon-width; } + +.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width); } +.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width); } + + +/* Navbar modifier + ========================================================================== */ + +.uk-search-navbar { width: $search-navbar-width; } + +/* + * Input + */ + +.uk-search-navbar .uk-search-input { + height: $search-navbar-height; + background: $search-navbar-background; + font-size: $search-navbar-font-size; + @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();} +} + +/* + * Icon + */ + +.uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; } + +.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width); } +.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width); } + + +/* Large modifier + ========================================================================== */ + +.uk-search-large { width: $search-large-width; } + +/* + * Input + */ + +.uk-search-large .uk-search-input { + height: $search-large-height; + background: $search-large-background; + font-size: $search-large-font-size; + @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();} +} + +/* + * Icon + */ + +.uk-search-large .uk-search-icon { width: $search-large-icon-width; } + +.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width); } +.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width); } + + +/* Toggle + ========================================================================== */ + +.uk-search-toggle { + color: $search-toggle-color; + @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();} +} + +/* Hover + Focus */ +.uk-search-toggle:hover, +.uk-search-toggle:focus { + color: $search-toggle-hover-color; + @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-search-misc)) {@include hook-search-misc();} + +// @mixin hook-search-input(){} +// @mixin hook-search-default-input(){} +// @mixin hook-search-default-input-focus(){} +// @mixin hook-search-navbar-input(){} +// @mixin hook-search-large-input(){} + +// @mixin hook-search-toggle(){} +// @mixin hook-search-toggle-hover(){} + +// @mixin hook-search-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-search-color: $inverse-global-color !default; +$inverse-search-placeholder-color: $inverse-global-muted-color !default; + +$inverse-search-icon-color: $inverse-global-muted-color !default; + +$inverse-search-default-background: $inverse-global-muted-background !default; +$inverse-search-default-focus-background: $inverse-search-default-background !default; + +$inverse-search-navbar-background: transparent !default; + +$inverse-search-large-background: transparent !default; + +$inverse-search-toggle-color: $inverse-global-muted-color !default; +$inverse-search-toggle-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-search-default-input(){} +// @mixin hook-inverse-search-default-input-focus(){} +// @mixin hook-inverse-search-navbar-input(){} +// @mixin hook-inverse-search-large-input(){} +// @mixin hook-inverse-search-toggle(){} +// @mixin hook-inverse-search-toggle-hover(){} diff --git a/scss/uikit/components/section.scss b/scss/uikit/components/section.scss new file mode 100644 index 00000000..ee7d2506 --- /dev/null +++ b/scss/uikit/components/section.scss @@ -0,0 +1,224 @@ +// Name: Section +// Description: Component to create horizontal layout section +// +// Component: `uk-section` +// +// Modifiers: `uk-section-xsmall` +// `uk-section-small` +// `uk-section-large` +// `uk-section-xlarge` +// `uk-section-default` +// `uk-section-muted` +// `uk-section-primary` +// `uk-section-secondary` +// `uk-section-overlap` +// +// States: `uk-preserve-color` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$section-padding-vertical: $global-medium-margin !default; +$section-padding-vertical-m: $global-large-margin !default; + +$section-xsmall-padding-vertical: $global-margin !default; + +$section-small-padding-vertical: $global-medium-margin !default; + +$section-large-padding-vertical: $global-large-margin !default; +$section-large-padding-vertical-m: $global-xlarge-margin !default; + +$section-xlarge-padding-vertical: $global-xlarge-margin !default; +$section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; + +$section-default-background: $global-background !default; + +$section-muted-background: $global-muted-background !default; + +$section-primary-background: $global-primary-background !default; +$section-primary-color-mode: light !default; + +$section-secondary-background: $global-secondary-background !default; +$section-secondary-color-mode: light !default; + + +/* ======================================================================== + Component: Section + ========================================================================== */ + +/* + * 1. Make it work with `100vh` and height in general + */ + +.uk-section { + box-sizing: border-box; /* 1 */ + padding-top: $section-padding-vertical; + padding-bottom: $section-padding-vertical; + @if(mixin-exists(hook-section)) {@include hook-section();} +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section { + padding-top: $section-padding-vertical-m; + padding-bottom: $section-padding-vertical-m; + } + +} + +/* + * Micro clearfix + */ + +.uk-section::before, +.uk-section::after { + content: ""; + display: table; +} + +.uk-section::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-section > :last-child { margin-bottom: 0; } + + +/* Size modifiers + ========================================================================== */ + +/* + * XSmall + */ + +.uk-section-xsmall { + padding-top: $section-xsmall-padding-vertical; + padding-bottom: $section-xsmall-padding-vertical; +} + +/* + * Small + */ + +.uk-section-small { + padding-top: $section-small-padding-vertical; + padding-bottom: $section-small-padding-vertical; +} + +/* + * Large + */ + +.uk-section-large { + padding-top: $section-large-padding-vertical; + padding-bottom: $section-large-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section-large { + padding-top: $section-large-padding-vertical-m; + padding-bottom: $section-large-padding-vertical-m; + } + +} + + +/* + * XLarge + */ + +.uk-section-xlarge { + padding-top: $section-xlarge-padding-vertical; + padding-bottom: $section-xlarge-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-section-xlarge { + padding-top: $section-xlarge-padding-vertical-m; + padding-bottom: $section-xlarge-padding-vertical-m; + } + +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-section-default { + background: $section-default-background; + @if(mixin-exists(hook-section-default)) {@include hook-section-default();} +} + +/* + * Muted + */ + +.uk-section-muted { + background: $section-muted-background; + @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();} +} + +/* + * Primary + */ + +.uk-section-primary { + background: $section-primary-background; + @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();} +} + +@if ( $section-primary-color-mode == light ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $section-primary-color-mode == dark ) { .uk-section-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +/* + * Secondary + */ + +.uk-section-secondary { + background: $section-secondary-background; + @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();} +} + +@if ( $section-secondary-color-mode == light ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $section-secondary-color-mode == dark ) { .uk-section-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +/* Overlap modifier + ========================================================================== */ + +/* + * Reserved modifier to make a section overlap another section with an border image + * Implemented by the theme + */ + +.uk-section-overlap { + @if(mixin-exists(hook-section-overlap)) {@include hook-section-overlap();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-section-misc)) {@include hook-section-misc();} + +// @mixin hook-section(){} +// @mixin hook-section-default(){} +// @mixin hook-section-muted(){} +// @mixin hook-section-secondary(){} +// @mixin hook-section-primary(){} +// @mixin hook-section-overlap(){} +// @mixin hook-section-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/slidenav.scss b/scss/uikit/components/slidenav.scss new file mode 100644 index 00000000..0b9af8f2 --- /dev/null +++ b/scss/uikit/components/slidenav.scss @@ -0,0 +1,122 @@ +// Name: Slidenav +// Description: Component to create previous/next icon navigations +// +// Component: `uk-slidenav` +// +// Sub-objects: `uk-slidenav-container` +// +// Modifiers: `uk-slidenav-previous` +// `uk-slidenav-next` +// `uk-slidenav-large` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$slidenav-padding-vertical: 5px !default; +$slidenav-padding-horizontal: 10px !default; + +$slidenav-color: rgba($global-color, 0.5) !default; +$slidenav-hover-color: rgba($global-color, 0.9) !default; +$slidenav-active-color: rgba($global-color, 0.5) !default; + +$slidenav-large-padding-vertical: 10px !default; +$slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default; + + +/* ======================================================================== + Component: Slidenav + ========================================================================== */ + +/* + * Adopts `uk-icon` + */ + +.uk-slidenav { + padding: $slidenav-padding-vertical $slidenav-padding-horizontal; + color: $slidenav-color; + @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();} +} + +/* Hover + Focus */ +.uk-slidenav:hover, +.uk-slidenav:focus { + color: $slidenav-hover-color; + outline: none; + @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();} +} + +/* OnClick */ +.uk-slidenav:active { + color: $slidenav-active-color; + @if(mixin-exists(hook-slidenav-active)) {@include hook-slidenav-active();} +} + + +/* Icon modifier + ========================================================================== */ + +/* + * Previous + */ + +.uk-slidenav-previous { + @if(mixin-exists(hook-slidenav-previous)) {@include hook-slidenav-previous();} +} + +/* + * Next + */ + +.uk-slidenav-next { + @if(mixin-exists(hook-slidenav-next)) {@include hook-slidenav-next();} +} + + +/* Size modifier + ========================================================================== */ + +.uk-slidenav-large { + padding: $slidenav-large-padding-vertical $slidenav-large-padding-horizontal; + @if(mixin-exists(hook-slidenav-large)) {@include hook-slidenav-large();} +} + + +/* Container + ========================================================================== */ + +.uk-slidenav-container { + display: flex; + @if(mixin-exists(hook-slidenav-container)) {@include hook-slidenav-container();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slidenav-misc)) {@include hook-slidenav-misc();} + +// @mixin hook-slidenav(){} +// @mixin hook-slidenav-hover(){} +// @mixin hook-slidenav-active(){} +// @mixin hook-slidenav-previous(){} +// @mixin hook-slidenav-next(){} +// @mixin hook-slidenav-large(){} +// @mixin hook-slidenav-container(){} +// @mixin hook-slidenav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-slidenav-color: rgba($inverse-global-color, 0.7) !default; +$inverse-slidenav-hover-color: rgba($inverse-global-color, 0.95) !default; +$inverse-slidenav-active-color: rgba($inverse-global-color, 0.7) !default; + + + +// @mixin hook-inverse-slidenav(){} +// @mixin hook-inverse-slidenav-hover(){} +// @mixin hook-inverse-slidenav-active(){} diff --git a/scss/uikit/components/slider.scss b/scss/uikit/components/slider.scss new file mode 100644 index 00000000..2799868e --- /dev/null +++ b/scss/uikit/components/slider.scss @@ -0,0 +1,99 @@ +// Name: Slider +// Description: Component to create horizontal sliders +// +// Component: `uk-slider` +// +// Sub-objects: `uk-slider-container` +// `uk-slider-items` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Slider + ========================================================================== */ + +/* + * 1. Prevent tab highlighting on iOS. + */ + +.uk-slider { + /* 1 */ + -webkit-tap-highlight-color: transparent; + @if(mixin-exists(hook-slider)) {@include hook-slider();} +} + + +/* Container + ========================================================================== */ + +/* + * 1. Clip child elements + */ + +.uk-slider-container { + /* 1 */ + overflow: hidden; +} + +/* Items + ========================================================================== */ + +/* + * 1. Optimize animation + * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`. + */ + +.uk-slider-items { + /* 1 */ + will-change: transform; + /* 2 */ + position: relative; +} + +/* + * 1. Reset list style without interfering with grid + * 2. Prevent displaying the callout information on iOS. + */ + +.uk-slider-items:not(.uk-grid) { + display: flex; + /* 1 */ + margin: 0; + padding: 0; + list-style: none; + /* 2 */ + -webkit-touch-callout: none; +} + +.uk-slider-items.uk-grid { flex-wrap: nowrap; } + + +/* Item + ========================================================================== */ + +/* + * 1. Let items take content dimensions (0 0 auto) + * 2. Create position context + * 3. Disable horizontal panning gestures in IE11 and Edge + */ + +.uk-slider-items > * { + /* 1 */ + flex: none; + /* 2 */ + position: relative; + /* 3 */ + touch-action: pan-y; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slider-misc)) {@include hook-slider-misc();} + +// @mixin hook-slider(){} +// @mixin hook-slider-misc(){} diff --git a/scss/uikit/components/slideshow.scss b/scss/uikit/components/slideshow.scss new file mode 100644 index 00000000..fc355d41 --- /dev/null +++ b/scss/uikit/components/slideshow.scss @@ -0,0 +1,93 @@ +// Name: Slideshow +// Description: Component to create slideshows +// +// Component: `uk-slideshow` +// +// Sub-objects: `uk-slideshow-items` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Slideshow + ========================================================================== */ + +/* + * 1. Prevent tab highlighting on iOS. + */ + +.uk-slideshow { + /* 1 */ + -webkit-tap-highlight-color: transparent; + @if(mixin-exists(hook-slideshow)) {@include hook-slideshow();} +} + + +/* Items + ========================================================================== */ + +/* + * 1. Create position and stacking context + * 2. Reset list + * 3. Clip child elements + * 4. Prevent displaying the callout information on iOS. + */ + +.uk-slideshow-items { + /* 1 */ + position: relative; + z-index: 0; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + overflow: hidden; + /* 4 */ + -webkit-touch-callout: none; +} + + +/* Item + ========================================================================== */ + +/* + * 1. Position items above each other + * 2. Take the full width + * 3. Clip child elements, e.g. for `uk-cover` + * 4. Optimize animation + * 5. Disable horizontal panning gestures in IE11 and Edge + */ + +.uk-slideshow-items > * { + /* 1 */ + position: absolute; + top: 0; + left: 0; + /* 2 */ + right: 0; + bottom: 0; + /* 3 */ + overflow: hidden; + /* 4 */ + will-change: transform, opacity; + /* 5 */ + touch-action: pan-y; +} + +/* + * Hide not active items + */ + +.uk-slideshow-items > :not(.uk-active) { display: none; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-slideshow-misc)) {@include hook-slideshow-misc();} + +// @mixin hook-slideshow(){} +// @mixin hook-slideshow-misc(){} diff --git a/scss/uikit/components/sortable.scss b/scss/uikit/components/sortable.scss new file mode 100644 index 00000000..8895f11c --- /dev/null +++ b/scss/uikit/components/sortable.scss @@ -0,0 +1,101 @@ +// Name: Sortable +// Description: Component to create sortable grids and lists +// +// Component: `uk-sortable` +// +// Sub-objects: `uk-sortable-drag` +// `uk-sortable-placeholder` +// `uk-sortable-handle` +// +// Modifiers: `uk-sortable-empty` +// +// States: `uk-drag` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$sortable-dragged-z-index: $global-z-index + 50 !default; + +$sortable-placeholder-opacity: 0 !default; + +$sortable-empty-height: 50px !default; + + +/* ======================================================================== + Component: Sortable + ========================================================================== */ + +.uk-sortable { + position: relative; + @if(mixin-exists(hook-sortable)) {@include hook-sortable();} +} + +/* + * Deactivate browser touch actions in IE11 and Edge + */ + +.uk-sortable > * { touch-action: none; } + +/* + * Deactivate pointer-events on SVGs in Safari + */ + +.uk-sortable svg { pointer-events: none; } + +/* + * Remove margin from the last-child + */ + +.uk-sortable > :last-child { margin-bottom: 0; } + + +/* Drag + ========================================================================== */ + +.uk-sortable-drag { + position: absolute !important; + z-index: $sortable-dragged-z-index !important; + pointer-events: none; + @if(mixin-exists(hook-sortable-drag)) {@include hook-sortable-drag();} +} + + +/* Placeholder + ========================================================================== */ + +.uk-sortable-placeholder { + opacity: $sortable-placeholder-opacity; + @if(mixin-exists(hook-sortable-placeholder)) {@include hook-sortable-placeholder();} +} + + +/* Empty modifier + ========================================================================== */ + +.uk-sortable-empty { + min-height: $sortable-empty-height; + @if(mixin-exists(hook-sortable-empty)) {@include hook-sortable-empty();} +} + + +/* Handle + ========================================================================== */ + +/* Hover */ +.uk-sortable-handle:hover { cursor: move; } + + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-sortable-misc)) {@include hook-sortable-misc();} + +// @mixin hook-sortable(){} +// @mixin hook-sortable-drag(){} +// @mixin hook-sortable-placeholder(){} +// @mixin hook-sortable-empty(){} +// @mixin hook-sortable-misc(){} diff --git a/scss/uikit/components/spinner.scss b/scss/uikit/components/spinner.scss new file mode 100644 index 00000000..a02f41d1 --- /dev/null +++ b/scss/uikit/components/spinner.scss @@ -0,0 +1,74 @@ +// Name: Spinner +// Description: Component to create a loading spinner +// +// Component: `uk-spinner` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$spinner-size: 30px !default; +$spinner-stroke-width: 1 !default; +$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default; // Minus stroke width to prevent overflow clipping +$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default; +$spinner-duration: 1.4s !default; + + +/* ======================================================================== + Component: Spinner + ========================================================================== */ + +/* + * Adopts `uk-icon` + */ + +.uk-spinner { + @if(mixin-exists(hook-spinner)) {@include hook-spinner();} +} + + +/* SVG + ========================================================================== */ + +.uk-spinner > * { animation: uk-spinner-rotate $spinner-duration linear infinite; } + +@keyframes uk-spinner-rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(270deg); } +} + +/* + * Circle + */ + +.uk-spinner > * > * { + stroke-dasharray: $spinner-circumference; + stroke-dashoffset: 0; + transform-origin: center; + animation: uk-spinner-dash $spinner-duration ease-in-out infinite; + stroke-width: $spinner-stroke-width; + stroke-linecap: round; +} + +@keyframes uk-spinner-dash { + 0% { stroke-dashoffset: $spinner-circumference; } + 50% { + stroke-dashoffset: $spinner-circumference/4; + transform:rotate(135deg); + } + 100% { + stroke-dashoffset: $spinner-circumference; + transform:rotate(450deg); + } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-spinner-misc)) {@include hook-spinner-misc();} + +// @mixin hook-spinner(){} +// @mixin hook-spinner-misc(){} diff --git a/scss/uikit/components/sticky.scss b/scss/uikit/components/sticky.scss new file mode 100644 index 00000000..e8e54f92 --- /dev/null +++ b/scss/uikit/components/sticky.scss @@ -0,0 +1,53 @@ +// Name: Sticky +// Description: Component to make elements sticky in the viewport +// +// Component: `uk-sticky` +// +// Modifier: `uk-sticky-fixed` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$sticky-z-index: $global-z-index - 20 !default; + +$sticky-animation-duration: 0.2s !default; +$sticky-reverse-animation-duration: 0.2s !default; + + +/* ======================================================================== + Component: Sticky + ========================================================================== */ + +/* + * 1. Resolve frame rate issues on devices with lower frame rates by forcing hardware acceleration + */ + +.uk-sticky-fixed { + z-index: $sticky-z-index; + box-sizing: border-box; + margin: 0 !important; + /* 1 */ + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* + * Faster animations + */ + +.uk-sticky[class*='uk-animation-'] { animation-duration: $sticky-animation-duration; } + +.uk-sticky.uk-animation-reverse { animation-duration: $sticky-reverse-animation-duration; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-sticky-misc)) {@include hook-sticky-misc();} + +// @mixin hook-sticky-misc(){} diff --git a/scss/uikit/components/subnav.scss b/scss/uikit/components/subnav.scss new file mode 100644 index 00000000..53975016 --- /dev/null +++ b/scss/uikit/components/subnav.scss @@ -0,0 +1,232 @@ +// Name: Subnav +// Description: Component to create a sub navigation +// +// Component: `uk-subnav` +// +// Modifiers: `uk-subnav-divider` +// `uk-subnav-pill` +// +// States: `uk-active` +// `uk-first-column` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$subnav-margin-horizontal: 20px !default; + +$subnav-item-color: $global-muted-color !default; +$subnav-item-hover-color: $global-color !default; +$subnav-item-hover-text-decoration: none !default; +$subnav-item-active-color: $global-emphasis-color !default; + +$subnav-divider-margin-horizontal: $subnav-margin-horizontal !default; +$subnav-divider-border-height: 1.5em !default; +$subnav-divider-border-width: $global-border-width !default; +$subnav-divider-border: $global-border !default; + +$subnav-pill-item-padding-vertical: 5px !default; +$subnav-pill-item-padding-horizontal: 10px !default; +$subnav-pill-item-background: transparent !default; +$subnav-pill-item-color: $subnav-item-color !default; +$subnav-pill-item-hover-background: $global-muted-background !default; +$subnav-pill-item-hover-color: $global-color !default; +$subnav-pill-item-onclick-background: $subnav-pill-item-hover-background !default; +$subnav-pill-item-onclick-color: $subnav-pill-item-hover-color !default; +$subnav-pill-item-active-background: $global-primary-background !default; +$subnav-pill-item-active-color: $global-inverse-color !default; + +$subnav-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Subnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-subnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$subnav-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-subnav)) {@include hook-subnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-subnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $subnav-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * Using `:first-child` instead of `a` to support `span` elements for text + * 1. Prevent gap if child element is `inline-block`, e.g. an icon + * 2. Style + */ + +.uk-subnav > * > :first-child { + /* 1 */ + display: block; + /* 2 */ + color: $subnav-item-color; + @if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();} +} + +/* Hover + Focus */ +.uk-subnav > * > a:hover, +.uk-subnav > * > a:focus { + color: $subnav-item-hover-color; + text-decoration: $subnav-item-hover-text-decoration; + outline: none; + @if(mixin-exists(hook-subnav-item-hover)) {@include hook-subnav-item-hover();} +} + +/* Active */ +.uk-subnav > .uk-active > a { + color: $subnav-item-active-color; + @if(mixin-exists(hook-subnav-item-active)) {@include hook-subnav-item-active();} +} + + +/* Divider modifier + ========================================================================== */ + +/* + * 1. Align items and divider vertically + */ + +.uk-subnav-divider > * { + /* 1 */ + display: flex; + align-items: center; +} + +/* + * Divider + * `nth-child` makes it also work without JS if it's only one row + */ + +.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before { + content: ""; + height: $subnav-divider-border-height; + margin-left: ($subnav-divider-margin-horizontal - $subnav-margin-horizontal); + margin-right: $subnav-divider-margin-horizontal; + border-left: $subnav-divider-border-width solid $subnav-divider-border; + @if(mixin-exists(hook-subnav-divider)) {@include hook-subnav-divider();} +} + + +/* Pill modifier + ========================================================================== */ + +.uk-subnav-pill > * > :first-child { + padding: $subnav-pill-item-padding-vertical $subnav-pill-item-padding-horizontal; + background: $subnav-pill-item-background; + color: $subnav-pill-item-color; + @if(mixin-exists(hook-subnav-pill-item)) {@include hook-subnav-pill-item();} +} + +/* Hover + Focus */ +.uk-subnav-pill > * > a:hover, +.uk-subnav-pill > * > a:focus { + background-color: $subnav-pill-item-hover-background; + color: $subnav-pill-item-hover-color; + @if(mixin-exists(hook-subnav-pill-item-hover)) {@include hook-subnav-pill-item-hover();} +} + +/* OnClick */ +.uk-subnav-pill > * > a:active { + background-color: $subnav-pill-item-onclick-background; + color: $subnav-pill-item-onclick-color; + @if(mixin-exists(hook-subnav-pill-item-onclick)) {@include hook-subnav-pill-item-onclick();} +} + +/* Active */ +.uk-subnav-pill > .uk-active > a { + background-color: $subnav-pill-item-active-background; + color: $subnav-pill-item-active-color; + @if(mixin-exists(hook-subnav-pill-item-active)) {@include hook-subnav-pill-item-active();} +} + + +/* Disabled + * The same for all style modifiers + ========================================================================== */ + +.uk-subnav > .uk-disabled > a { + color: $subnav-item-disabled-color; + @if(mixin-exists(hook-subnav-item-disabled)) {@include hook-subnav-item-disabled();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-subnav-misc)) {@include hook-subnav-misc();} + +// @mixin hook-subnav(){} +// @mixin hook-subnav-item(){} +// @mixin hook-subnav-item-hover(){} +// @mixin hook-subnav-item-active(){} +// @mixin hook-subnav-divider(){} +// @mixin hook-subnav-pill-item(){} +// @mixin hook-subnav-pill-item-hover(){} +// @mixin hook-subnav-pill-item-onclick(){} +// @mixin hook-subnav-pill-item-active(){} +// @mixin hook-subnav-item-disabled(){} +// @mixin hook-subnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-subnav-item-color: $inverse-global-muted-color !default; +$inverse-subnav-item-hover-color: $inverse-global-color !default; +$inverse-subnav-item-active-color: $inverse-global-emphasis-color !default; +$inverse-subnav-divider-border: $inverse-global-border !default; +$inverse-subnav-pill-item-background: transparent !default; +$inverse-subnav-pill-item-color: $inverse-global-muted-color !default; +$inverse-subnav-pill-item-hover-background: $inverse-global-muted-background !default; +$inverse-subnav-pill-item-hover-color: $inverse-global-color !default; +$inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background !default; +$inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color !default; +$inverse-subnav-pill-item-active-background: $inverse-global-primary-background !default; +$inverse-subnav-pill-item-active-color: $inverse-global-inverse-color !default; +$inverse-subnav-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-subnav-item(){} +// @mixin hook-inverse-subnav-item-hover(){} +// @mixin hook-inverse-subnav-item-active(){} +// @mixin hook-inverse-subnav-divider(){} +// @mixin hook-inverse-subnav-pill-item(){} +// @mixin hook-inverse-subnav-pill-item-hover(){} +// @mixin hook-inverse-subnav-pill-item-onclick(){} +// @mixin hook-inverse-subnav-pill-item-active(){} +// @mixin hook-inverse-subnav-item-disabled(){} diff --git a/scss/uikit/components/svg.scss b/scss/uikit/components/svg.scss new file mode 100644 index 00000000..5a0db3d6 --- /dev/null +++ b/scss/uikit/components/svg.scss @@ -0,0 +1,39 @@ +// Name: SVG +// Description: Component to style SVGs +// +// Component: `uk-svg` +// +// ======================================================================== + + +/* ======================================================================== + Component: SVG + ========================================================================== */ + +/* + * 1. Fill all SVG elements with the current text color if no `fill` attribute is set + * 2. Set the fill and stroke color of all SVG elements to the current text color + * 3. Fix for uppercase attribute names in Edge. Will be fixed in Windows 10 builds 16251+ + */ + +/* 1 */ +.uk-svg, +/* 2 */ +.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve), +.uk-svg:not(.uk-preserve) [FILL*='#']:not(.uk-preserve) { fill: currentcolor; } // 3 +.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve), +.uk-svg:not(.uk-preserve) [STROKE*='#']:not(.uk-preserve) { stroke: currentcolor; } // 3 + +/* + * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835 + */ + +.uk-svg { transform: translate(0,0); } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-svg-misc)) {@include hook-svg-misc();} + +// @mixin hook-svg-misc(){} diff --git a/scss/uikit/components/switcher.scss b/scss/uikit/components/switcher.scss new file mode 100644 index 00000000..0d99cdf7 --- /dev/null +++ b/scss/uikit/components/switcher.scss @@ -0,0 +1,47 @@ +// Name: Switcher +// Description: Component to navigate through different content panes +// +// Component: `uk-switcher` +// +// States: `uk-active` +// +// ======================================================================== + + +/* ======================================================================== + Component: Switcher + ========================================================================== */ + +/* + * Reset list + */ + +.uk-switcher { + margin: 0; + padding: 0; + list-style: none; +} + + +/* Items + ========================================================================== */ + +/* + * Hide not active items + */ + +.uk-switcher > :not(.uk-active) { display: none; } + +/* + * Remove margin from the last-child + */ + +.uk-switcher > * > :last-child { margin-bottom: 0; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-switcher-misc)) {@include hook-switcher-misc();} + +// @mixin hook-switcher-misc(){}
\ No newline at end of file diff --git a/scss/uikit/components/tab.scss b/scss/uikit/components/tab.scss new file mode 100644 index 00000000..87e0a678 --- /dev/null +++ b/scss/uikit/components/tab.scss @@ -0,0 +1,191 @@ +// Name: Tab +// Description: Component to create a tabbed navigation +// +// Component: `uk-tab` +// +// Modifiers: `uk-tab-bottom` +// `uk-tab-left` +// `uk-tab-right` +// +// States: `uk-active` +// `uk-disabled` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tab-margin-horizontal: 20px !default; + +$tab-item-padding-horizontal: 10px !default; +$tab-item-padding-vertical: 5px !default; +$tab-item-color: $global-muted-color !default; +$tab-item-hover-color: $global-color !default; +$tab-item-hover-text-decoration: none !default; +$tab-item-active-color: $global-emphasis-color !default; +$tab-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Tab + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-tab { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$tab-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-tab)) {@include hook-tab();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-tab > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $tab-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Center text if a width is set + * 2. Style + */ + +.uk-tab > * > a { + /* 1 */ + display: block; + text-align: center; + /* 2 */ + padding: $tab-item-padding-vertical $tab-item-padding-horizontal; + color: $tab-item-color; + @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();} +} + +/* Hover + Focus */ +.uk-tab > * > a:hover, +.uk-tab > * > a:focus { + color: $tab-item-hover-color; + text-decoration: $tab-item-hover-text-decoration; + @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();} +} + +/* Active */ +.uk-tab > .uk-active > a { + color: $tab-item-active-color; + @if(mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();} +} + +/* Disabled */ +.uk-tab > .uk-disabled > a { + color: $tab-item-disabled-color; + @if(mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();} +} + + +/* Position modifier + ========================================================================== */ + +/* + * Bottom + */ + +.uk-tab-bottom { + @if(mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();} +} + +.uk-tab-bottom > * > a { + @if(mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();} +} + +/* + * Left + Right + * 1. Reset Gutter + */ + +.uk-tab-left, +.uk-tab-right { + flex-direction: column; + /* 1 */ + margin-left: 0; +} + +/* 1 */ +.uk-tab-left > *, +.uk-tab-right > * { padding-left: 0; } + +.uk-tab-left { + @if(mixin-exists(hook-tab-left)) {@include hook-tab-left();} +} + +.uk-tab-right { + @if(mixin-exists(hook-tab-right)) {@include hook-tab-right();} +} + +.uk-tab-left > * > a { + text-align: left; + @if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();} +} + +.uk-tab-right > * > a { + text-align: left; + @if(mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tab-misc)) {@include hook-tab-misc();} + +// @mixin hook-tab(){} +// @mixin hook-tab-item(){} +// @mixin hook-tab-item-hover(){} +// @mixin hook-tab-item-active(){} +// @mixin hook-tab-item-disabled(){} +// @mixin hook-tab-bottom(){} +// @mixin hook-tab-bottom-item(){} +// @mixin hook-tab-left(){} +// @mixin hook-tab-left-item(){} +// @mixin hook-tab-right(){} +// @mixin hook-tab-right-item(){} +// @mixin hook-tab-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-tab-item-color: $inverse-global-muted-color !default; +$inverse-tab-item-hover-color: $inverse-global-color !default; +$inverse-tab-item-active-color: $inverse-global-emphasis-color !default; +$inverse-tab-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-tab(){} +// @mixin hook-inverse-tab-item(){} +// @mixin hook-inverse-tab-item-hover(){} +// @mixin hook-inverse-tab-item-active(){} +// @mixin hook-inverse-tab-item-disabled(){}
\ No newline at end of file diff --git a/scss/uikit/components/table.scss b/scss/uikit/components/table.scss new file mode 100644 index 00000000..313d218b --- /dev/null +++ b/scss/uikit/components/table.scss @@ -0,0 +1,316 @@ +// Name: Table +// Description: Styles for tables +// +// Component: `uk-table` +// +// Modifiers: `uk-table-middle` +// `uk-table-divider` +// `uk-table-striped` +// `uk-table-hover` +// `uk-table-small` +// `uk-table-justify` +// `uk-table-shrink` +// `uk-table-expand` +// `uk-table-link` +// `uk-table-responsive` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$table-margin-vertical: $global-margin !default; + +$table-cell-padding-vertical: 16px !default; +$table-cell-padding-horizontal: 12px !default; + +$table-header-cell-font-size: $global-font-size !default; +$table-header-cell-font-weight: bold !default; +$table-header-cell-color: $global-color !default; + +$table-footer-font-size: $global-small-font-size !default; + +$table-caption-font-size: $global-small-font-size !default; +$table-caption-color: $global-muted-color !default; + +$table-row-active-background: #ffd !default; + +$table-divider-border-width: $global-border-width !default; +$table-divider-border: $global-border !default; + +$table-striped-row-background: $global-muted-background !default; + +$table-hover-row-background: $table-row-active-background !default; + +$table-small-cell-padding-vertical: 10px !default; +$table-small-cell-padding-horizontal: 12px !default; + +$table-large-cell-padding-vertical: 22px !default; +$table-large-cell-padding-horizontal: 12px !default; + +$table-expand-min-width: 150px !default; + + +/* ======================================================================== + Component: Table + ========================================================================== */ + +/* + * 1. Remove most spacing between table cells. + * 2. Behave like a block element + * 3. Style + */ + +.uk-table { + /* 1 */ + border-collapse: collapse; + border-spacing: 0; + /* 2 */ + width: 100%; + /* 3 */ + margin-bottom: $table-margin-vertical; + @if(mixin-exists(hook-table)) {@include hook-table();} +} + +/* Add margin if adjacent element */ +* + .uk-table { margin-top: $table-margin-vertical; } + + +/* Header cell + ========================================================================== */ + +/* + * 1. Style + */ + +.uk-table th { + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; + text-align: left; + vertical-align: bottom; + /* 1 */ + font-size: $table-header-cell-font-size; + font-weight: $table-header-cell-font-weight; + color: $table-header-cell-color; + @if(mixin-exists(hook-table-header-cell)) {@include hook-table-header-cell();} +} + + +/* Cell + ========================================================================== */ + +.uk-table td { + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; + vertical-align: top; + @if(mixin-exists(hook-table-cell)) {@include hook-table-cell();} +} + +/* + * Remove margin from the last-child + */ + +.uk-table td > :last-child { margin-bottom: 0; } + + +/* Footer + ========================================================================== */ + +.uk-table tfoot { + font-size: $table-footer-font-size; + @if(mixin-exists(hook-table-footer)) {@include hook-table-footer();} +} + + +/* Caption + ========================================================================== */ + +.uk-table caption { + font-size: $table-caption-font-size; + text-align: left; + color: $table-caption-color; + @if(mixin-exists(hook-table-caption)) {@include hook-table-caption();} +} + + +/* Row + ========================================================================== */ + +.uk-table > tr.uk-active, +.uk-table tbody tr.uk-active { + background: $table-row-active-background; + @if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();} +} + + +/* Alignment modifier + ========================================================================== */ + +.uk-table-middle, +.uk-table-middle td { vertical-align: middle !important; } + + +/* Style modifiers + ========================================================================== */ + +/* + * Divider + */ + +.uk-table-divider > tr:not(:first-child), +.uk-table-divider > :not(:first-child) > tr, +.uk-table-divider > :first-child > tr:not(:first-child) { + border-top: $table-divider-border-width solid $table-divider-border; + @if(mixin-exists(hook-table-divider)) {@include hook-table-divider();} +} + +/* + * Striped + */ + +.uk-table-striped > tr:nth-of-type(odd), +.uk-table-striped tbody tr:nth-of-type(odd) { + background: $table-striped-row-background; + @if(mixin-exists(hook-table-striped)) {@include hook-table-striped();} +} + +/* + * Hover + */ + +.uk-table-hover > tr:hover, +.uk-table-hover tbody tr:hover { + background: $table-hover-row-background; + @if(mixin-exists(hook-table-hover)) {@include hook-table-hover();} +} + + +/* Size modifier + ========================================================================== */ + +.uk-table-small th, +.uk-table-small td { + padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; + @if(mixin-exists(hook-table-small)) {@include hook-table-small();} +} + +.uk-table-large th, +.uk-table-large td { + padding: $table-large-cell-padding-vertical $table-large-cell-padding-horizontal; + @if(mixin-exists(hook-table-large)) {@include hook-table-large();} +} + + +/* Justify modifier + ========================================================================== */ + +.uk-table-justify th:first-child, +.uk-table-justify td:first-child { padding-left: 0; } + +.uk-table-justify th:last-child, +.uk-table-justify td:last-child { padding-right: 0; } + + +/* Cell size modifier + ========================================================================== */ + +.uk-table-shrink { width: 1px; } +.uk-table-expand { min-width: $table-expand-min-width; } + + +/* Cell link modifier + ========================================================================== */ + +/* + * Does not work with `uk-table-justify` at the moment + */ + +.uk-table-link { padding: 0 !important; } + +.uk-table-link > a { + display: block; + padding: $table-cell-padding-vertical $table-cell-padding-horizontal; +} + +.uk-table-small .uk-table-link > a { padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; } + + +/* Responsive table + ========================================================================== */ + + +/* Phone landscape and smaller */ +@media (max-width: $breakpoint-small-max) { + + .uk-table-responsive, + .uk-table-responsive tbody, + .uk-table-responsive th, + .uk-table-responsive td, + .uk-table-responsive tr { display: block; } + + .uk-table-responsive thead { display: none; } + + .uk-table-responsive th, + .uk-table-responsive td { + width: auto !important; + max-width: none !important; + min-width: 0 !important; + overflow: visible !important; + white-space: normal !important; + } + + .uk-table-responsive th:not(:first-child):not(.uk-table-link), + .uk-table-responsive td:not(:first-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round($table-cell-padding-vertical / 3) !important; } + + .uk-table-responsive th:not(:last-child):not(.uk-table-link), + .uk-table-responsive td:not(:last-child):not(.uk-table-link), + .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round($table-cell-padding-vertical / 3) !important; } + + .uk-table-justify.uk-table-responsive th, + .uk-table-justify.uk-table-responsive td { + padding-left: 0; + padding-right: 0; + } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-table-misc)) {@include hook-table-misc();} + +// @mixin hook-table(){} +// @mixin hook-table-header-cell(){} +// @mixin hook-table-cell(){} +// @mixin hook-table-footer(){} +// @mixin hook-table-caption(){} +// @mixin hook-table-row-active(){} +// @mixin hook-table-divider(){} +// @mixin hook-table-striped(){} +// @mixin hook-table-hover(){} +// @mixin hook-table-small(){} +// @mixin hook-table-large(){} +// @mixin hook-table-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-table-header-cell-color: $inverse-global-color !default; +$inverse-table-caption-color: $inverse-global-muted-color !default; +$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default; +$inverse-table-divider-border: $inverse-global-border !default; +$inverse-table-striped-row-background: $inverse-global-muted-background !default; +$inverse-table-hover-row-background: $inverse-table-row-active-background !default; + + + +// @mixin hook-inverse-table-header-cell(){} +// @mixin hook-inverse-table-caption(){} +// @mixin hook-inverse-table-row-active(){} +// @mixin hook-inverse-table-divider(){} +// @mixin hook-inverse-table-striped(){} +// @mixin hook-inverse-table-hover(){}
\ No newline at end of file diff --git a/scss/uikit/components/text.scss b/scss/uikit/components/text.scss new file mode 100644 index 00000000..a4edbdab --- /dev/null +++ b/scss/uikit/components/text.scss @@ -0,0 +1,258 @@ +// Name: Text +// Description: Utilities for text +// +// Component: `uk-text-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$text-lead-font-size: $global-large-font-size !default; +$text-lead-line-height: 1.5 !default; +$text-lead-color: $global-emphasis-color !default; + +$text-meta-font-size: $global-small-font-size !default; +$text-meta-line-height: 1.4 !default; +$text-meta-color: $global-muted-color !default; + +$text-small-font-size: $global-small-font-size !default; +$text-small-line-height: 1.5 !default; + +$text-large-font-size: $global-large-font-size !default; +$text-large-line-height: 1.5 !default; + +$text-bold-font-weight: bolder !default; + +$text-muted-color: $global-muted-color !default; +$text-primary-color: $global-primary-background !default; +$text-success-color: $global-success-background !default; +$text-warning-color: $global-warning-background !default; +$text-danger-color: $global-danger-background !default; + +$text-background-color: $global-primary-background !default; + + +/* ======================================================================== + Component: Text + ========================================================================== */ + + +/* Style modifiers + ========================================================================== */ + +.uk-text-lead { + font-size: $text-lead-font-size; + line-height: $text-lead-line-height; + color: $text-lead-color; + @if(mixin-exists(hook-text-lead)) {@include hook-text-lead();} +} + +.uk-text-meta { + font-size: $text-meta-font-size; + line-height: $text-meta-line-height; + color: $text-meta-color; + @if(mixin-exists(hook-text-meta)) {@include hook-text-meta();} +} + + +/* Size modifiers + ========================================================================== */ + +.uk-text-small { + font-size: $text-small-font-size; + line-height: $text-small-line-height; + @if(mixin-exists(hook-text-small)) {@include hook-text-small();} +} + +.uk-text-large { + font-size: $text-large-font-size; + line-height: $text-large-line-height; + @if(mixin-exists(hook-text-large)) {@include hook-text-large();} +} + + +/* Weight modifier + ========================================================================== */ + +.uk-text-bold { font-weight: $text-bold-font-weight; } + + +/* Transform modifier + ========================================================================== */ + +.uk-text-uppercase { text-transform: uppercase !important; } +.uk-text-capitalize { text-transform: capitalize !important; } +.uk-text-lowercase { text-transform: lowercase !important; } + + +/* Color modifiers + ========================================================================== */ + +.uk-text-muted { color: $text-muted-color !important; } +.uk-text-primary { color: $text-primary-color !important; } +.uk-text-success { color: $text-success-color !important; } +.uk-text-warning { color: $text-warning-color !important; } +.uk-text-danger { color: $text-danger-color !important; } + + +/* Background modifier + ========================================================================== */ + +/* + * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera + * Default color is set to transparent + * 2. Container fits the text + * 3. Fallback color for IE11 + */ + +.uk-text-background { + /* 1 */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + /* 2 */ + display: inline-block; + /* 3 */ + color: $text-background-color !important; +} + +@supports (-webkit-background-clip: text) { + + .uk-text-background { + background-color: $text-background-color; + @if(mixin-exists(hook-text-background)) {@include hook-text-background();} + } + +} + + +/* Alignment modifiers + ========================================================================== */ + +.uk-text-left { text-align: left !important; } +.uk-text-right { text-align: right !important; } +.uk-text-center { text-align: center !important; } +.uk-text-justify { text-align: justify !important; } + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-text-left\@s { text-align: left !important; } + .uk-text-right\@s { text-align: right !important; } + .uk-text-center\@s { text-align: center !important; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-text-left\@m { text-align: left !important; } + .uk-text-right\@m { text-align: right !important; } + .uk-text-center\@m { text-align: center !important; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-text-left\@l { text-align: left !important; } + .uk-text-right\@l { text-align: right !important; } + .uk-text-center\@l { text-align: center !important; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-text-left\@xl { text-align: left !important; } + .uk-text-right\@xl { text-align: right !important; } + .uk-text-center\@xl { text-align: center !important; } + +} + +/* + * Vertical + */ + +.uk-text-top { vertical-align: top !important; } +.uk-text-middle { vertical-align: middle !important; } +.uk-text-bottom { vertical-align: bottom !important; } +.uk-text-baseline { vertical-align: baseline !important; } + + +/* Wrap modifiers + ========================================================================== */ + +/* + * Prevent text from wrapping onto multiple lines + */ + +.uk-text-nowrap { white-space: nowrap; } + +/* + * 1. Make sure a max-width is set after which truncation can occur + * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis + * 3. Fix for table cells + */ + +.uk-text-truncate { + /* 1 */ + max-width: 100%; + /* 2 */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 2 */ +th.uk-text-truncate, +td.uk-text-truncate { max-width: 0; } + + +/* + * 1. Wrap long words onto the next line and break them if they are too long to fit + * 2. Legacy `word-wrap` as fallback for `overflow-wrap` + * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge + * Must use `break-all` to support IE11 and Edge + * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed + */ + +.uk-text-break { + /* 1 */ + overflow-wrap: break-word; + /* 2 */ + word-wrap: break-word; +} + +/* 3 */ +th.uk-text-break, +td.uk-text-break { word-break: break-all; } + + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-text-misc)) {@include hook-text-misc();} + +// @mixin hook-text-lead(){} +// @mixin hook-text-meta(){} +// @mixin hook-text-small(){} +// @mixin hook-text-large(){} +// @mixin hook-text-background(){} +// @mixin hook-text-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-text-lead-color: $inverse-global-color !default; +$inverse-text-meta-color: $inverse-global-muted-color !default; +$inverse-text-muted-color: $inverse-global-muted-color !default; +$inverse-text-primary-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-text-lead(){} +// @mixin hook-inverse-text-meta(){} diff --git a/scss/uikit/components/thumbnav.scss b/scss/uikit/components/thumbnav.scss new file mode 100644 index 00000000..ee551f99 --- /dev/null +++ b/scss/uikit/components/thumbnav.scss @@ -0,0 +1,123 @@ +// Name: Thumbnav +// Description: Component to create thumbnail navigations +// +// Component: `uk-thumbnav` +// +// Modifier: `uk-thumbnav-vertical` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$thumbnav-margin-horizontal: 15px !default; +$thumbnav-margin-vertical: $thumbnav-margin-horizontal !default; + + +/* ======================================================================== + Component: Thumbnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ + +.uk-thumbnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: (-$thumbnav-margin-horizontal); + @if(mixin-exists(hook-thumbnav)) {@include hook-thumbnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ + +.uk-thumbnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $thumbnav-margin-horizontal; +} + + +/* Items + ========================================================================== */ + +/* + * Items + */ + +.uk-thumbnav > * > * { + display: inline-block; + @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();} +} + +/* Hover + Focus */ +.uk-thumbnav > * > :hover, +.uk-thumbnav > * > :focus { + outline: none; + @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();} +} + +/* Active */ +.uk-thumbnav > .uk-active > * { + @if(mixin-exists(hook-thumbnav-item-active)) {@include hook-thumbnav-item-active();} +} + + +/* Modifier: 'uk-thumbnav-vertical' + ========================================================================== */ + +/* + * 1. Change direction + * 2. Gutter + */ + +.uk-thumbnav-vertical { + /* 1 */ + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: (-$thumbnav-margin-vertical); +} + +/* 2 */ +.uk-thumbnav-vertical > * { + padding-left: 0; + padding-top: $thumbnav-margin-vertical; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-thumbnav-misc)) {@include hook-thumbnav-misc();} + +// @mixin hook-thumbnav(){} +// @mixin hook-thumbnav-item(){} +// @mixin hook-thumbnav-item-hover(){} +// @mixin hook-thumbnav-item-active(){} +// @mixin hook-thumbnav-misc(){} + + +// Inverse +// ======================================================================== + + + +// @mixin hook-inverse-thumbnav-item(){} +// @mixin hook-inverse-thumbnav-item-hover(){} +// @mixin hook-inverse-thumbnav-item-active(){}
\ No newline at end of file diff --git a/scss/uikit/components/tile.scss b/scss/uikit/components/tile.scss new file mode 100644 index 00000000..3a364bfb --- /dev/null +++ b/scss/uikit/components/tile.scss @@ -0,0 +1,224 @@ +// Name: Tile +// Description: Component to create tiled boxes +// +// Component: `uk-tile` +// +// Modifiers: `uk-tile-xsmall` +// `uk-tile-small` +// `uk-tile-large` +// `uk-tile-xlarge` +// `uk-tile-default` +// `uk-tile-muted` +// `uk-tile-primary` +// `uk-tile-secondary` +// +// States: `uk-preserve-color` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tile-padding-horizontal: 15px !default; +$tile-padding-horizontal-s: $global-gutter !default; +$tile-padding-horizontal-m: $global-medium-gutter !default; +$tile-padding-vertical: $global-medium-margin !default; +$tile-padding-vertical-m: $global-large-margin !default; + +$tile-xsmall-padding-vertical: $global-margin !default; + +$tile-small-padding-vertical: $global-medium-margin !default; + +$tile-large-padding-vertical: $global-large-margin !default; +$tile-large-padding-vertical-m: $global-xlarge-margin !default; + +$tile-xlarge-padding-vertical: $global-xlarge-margin !default; +$tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default; + +$tile-default-background: $global-background !default; + +$tile-muted-background: $global-muted-background !default; + +$tile-primary-background: $global-primary-background !default; +$tile-primary-color-mode: light !default; + +$tile-secondary-background: $global-secondary-background !default; +$tile-secondary-color-mode: light !default; + + +/* ======================================================================== + Component: Tile + ========================================================================== */ + +.uk-tile { + position: relative; + box-sizing: border-box; + padding-left: $tile-padding-horizontal; + padding-right: $tile-padding-horizontal; + padding-top: $tile-padding-vertical; + padding-bottom: $tile-padding-vertical; + @if(mixin-exists(hook-tile)) {@include hook-tile();} +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-tile { + padding-left: $tile-padding-horizontal-s; + padding-right: $tile-padding-horizontal-s; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile { + padding-left: $tile-padding-horizontal-m; + padding-right: $tile-padding-horizontal-m; + padding-top: $tile-padding-vertical-m; + padding-bottom: $tile-padding-vertical-m; + } + +} + +/* + * Micro clearfix + */ + +.uk-tile::before, +.uk-tile::after { + content: ""; + display: table; +} + +.uk-tile::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-tile > :last-child { margin-bottom: 0; } + + +/* Size modifiers + ========================================================================== */ + +/* + * XSmall + */ + +.uk-tile-xsmall { + padding-top: $tile-xsmall-padding-vertical; + padding-bottom: $tile-xsmall-padding-vertical; +} + +/* + * Small + */ + +.uk-tile-small { + padding-top: $tile-small-padding-vertical; + padding-bottom: $tile-small-padding-vertical; +} + +/* + * Large + */ + +.uk-tile-large { + padding-top: $tile-large-padding-vertical; + padding-bottom: $tile-large-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile-large { + padding-top: $tile-large-padding-vertical-m; + padding-bottom: $tile-large-padding-vertical-m; + } + +} + + +/* + * XLarge + */ + +.uk-tile-xlarge { + padding-top: $tile-xlarge-padding-vertical; + padding-bottom: $tile-xlarge-padding-vertical; +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-tile-xlarge { + padding-top: $tile-xlarge-padding-vertical-m; + padding-bottom: $tile-xlarge-padding-vertical-m; + } + +} + + +/* Style modifiers + ========================================================================== */ + +/* + * Default + */ + +.uk-tile-default { + background: $tile-default-background; + @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();} +} + +/* + * Muted + */ + +.uk-tile-muted { + background: $tile-muted-background; + @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();} +} + +/* + * Primary + */ + +.uk-tile-primary { + background: $tile-primary-background; + @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();} +} + +// Color Mode +@if ( $tile-primary-color-mode == light ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $tile-primary-color-mode == dark ) { .uk-tile-primary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + +/* + * Secondary + */ + +.uk-tile-secondary { + background: $tile-secondary-background; + @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();} +} + +// Color Mode +@if ( $tile-secondary-color-mode == light ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-light !optional;} } +@if ( $tile-secondary-color-mode == dark ) { .uk-tile-secondary:not(.uk-preserve-color) { @extend .uk-dark !optional;} } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tile-misc)) {@include hook-tile-misc();} + +// @mixin hook-tile(){} +// @mixin hook-tile-default(){} +// @mixin hook-tile-muted(){} +// @mixin hook-tile-primary(){} +// @mixin hook-tile-secondary(){} +// @mixin hook-tile-misc(){} diff --git a/scss/uikit/components/tooltip.scss b/scss/uikit/components/tooltip.scss new file mode 100644 index 00000000..1f8e8c88 --- /dev/null +++ b/scss/uikit/components/tooltip.scss @@ -0,0 +1,84 @@ +// Name: Tooltip +// Description: Component to create tooltips +// +// Component: `uk-tooltip` +// +// Modifiers `uk-tooltip-top` +// `uk-tooltip-top-left` +// `uk-tooltip-top-right` +// `uk-tooltip-bottom` +// `uk-tooltip-bottom-left` +// `uk-tooltip-bottom-right` +// `uk-tooltip-left` +// `uk-tooltip-right` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tooltip-z-index: $global-z-index + 30 !default; +$tooltip-max-width: 200px !default; +$tooltip-padding-vertical: 3px !default; +$tooltip-padding-horizontal: 6px !default; +$tooltip-background: #666 !default; +$tooltip-border-radius: 2px !default; +$tooltip-color: $global-inverse-color !default; +$tooltip-font-size: 12px !default; + +$tooltip-margin: 10px !default; + + +/* ======================================================================== + Component: Tooltip + ========================================================================== */ + +/* + * 1. Hide by default + * 2. Position + * 3. Dimensions + * 4. Style + */ + +.uk-tooltip { + /* 1 */ + display: none; + /* 2 */ + position: absolute; + z-index: $tooltip-z-index; + /* 3 */ + box-sizing: border-box; + max-width: $tooltip-max-width; + padding: $tooltip-padding-vertical $tooltip-padding-horizontal; + /* 4 */ + background: $tooltip-background; + border-radius: $tooltip-border-radius; + color: $tooltip-color; + font-size: $tooltip-font-size; + @if(mixin-exists(hook-tooltip)) {@include hook-tooltip();} +} + +/* Show */ +.uk-tooltip.uk-active { display: block; } + + +/* Direction / Alignment modifiers + ========================================================================== */ + +/* Direction */ +[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); } +[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; } +[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); } +[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tooltip-misc)) {@include hook-tooltip-misc();} + +// @mixin hook-tooltip(){} +// @mixin hook-tooltip-misc(){} diff --git a/scss/uikit/components/totop.scss b/scss/uikit/components/totop.scss new file mode 100644 index 00000000..4b8aa1d8 --- /dev/null +++ b/scss/uikit/components/totop.scss @@ -0,0 +1,71 @@ +// Name: Totop +// Description: Component to create an icon to scroll back to top +// +// Component: `uk-totop` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$totop-padding: 5px !default; +$totop-color: $global-muted-color !default; + +$totop-hover-color: $global-color !default; + +$totop-active-color: $global-emphasis-color !default; + + +/* ======================================================================== + Component: Totop + ========================================================================== */ + +/* + * Addopts `uk-icon` + */ + +.uk-totop { + padding: $totop-padding; + color: $totop-color; + @if(mixin-exists(hook-totop)) {@include hook-totop();} +} + +/* Hover + Focus */ +.uk-totop:hover, +.uk-totop:focus { + color: $totop-hover-color; + outline: none; + @if(mixin-exists(hook-totop-hover)) {@include hook-totop-hover();} +} + +/* OnClick */ +.uk-totop:active { + color: $totop-active-color; + @if(mixin-exists(hook-totop-active)) {@include hook-totop-active();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-totop-misc)) {@include hook-totop-misc();} + +// @mixin hook-totop(){} +// @mixin hook-totop-hover(){} +// @mixin hook-totop-active(){} +// @mixin hook-totop-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-totop-color: $inverse-global-muted-color !default; +$inverse-totop-hover-color: $inverse-global-color !default; +$inverse-totop-active-color: $inverse-global-emphasis-color !default; + + + +// @mixin hook-inverse-totop(){} +// @mixin hook-inverse-totop-hover(){} +// @mixin hook-inverse-totop-active(){} diff --git a/scss/uikit/components/transition.scss b/scss/uikit/components/transition.scss new file mode 100644 index 00000000..c9992743 --- /dev/null +++ b/scss/uikit/components/transition.scss @@ -0,0 +1,145 @@ +// Name: Transition +// Description: Utilities for transitions +// +// Component: `uk-transition-*` +// +// Modifiers: `uk-transition-fade` +// `uk-transition-scale-up` +// `uk-transition-scale-down` +// `uk-transition-slide-top-*` +// `uk-transition-slide-bottom-*` +// `uk-transition-slide-left-*` +// `uk-transition-slide-right-*` +// `uk-transition-opaque` +// `uk-transition-slow` +// +// Sub-objects: `uk-transition-toggle`, +// `uk-transition-active` +// +// States: `uk-hover` +// `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$transition-duration: 0.3s !default; + +$transition-scale: 1.1 !default; + +$transition-slide-small-translate: 10px !default; +$transition-slide-medium-translate: 50px !default; + +$transition-slow-duration: 0.7s !default; + + +/* ======================================================================== + Component: Transition + ========================================================================== */ + +/* + * Using multiple selectors to exclude `uk-transition-toggle` + * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform` + * Just put the transition in an extra `div` + */ + +.uk-transition-fade, +[class*='uk-transition-scale'], +[class*='uk-transition-slide'] { + transition: $transition-duration ease-out; + transition-property: opacity, transform, filter; +} + +.uk-transition-toggle:focus { outline: none; } + +/* + * Fade + */ + +.uk-transition-fade { opacity: 0; } + +/* Show */ +.uk-transition-toggle:hover [class*='uk-transition-fade'], +.uk-transition-toggle.uk-hover [class*='uk-transition-fade'], +.uk-transition-toggle:focus [class*='uk-transition-fade'], +.uk-transition-active.uk-active [class*='uk-transition-fade'] { opacity: 1; } + +/* + * Scale + * Note: Using `scale3d` for better image rendering + */ + +[class*='uk-transition-scale'] { opacity: 0; } + +.uk-transition-scale-up { transform: scale3d(1,1,1); } + +.uk-transition-scale-down { transform: scale3d($transition-scale,$transition-scale,1); } + +/* Show */ +.uk-transition-toggle:hover .uk-transition-scale-up, +.uk-transition-toggle.uk-hover .uk-transition-scale-up, +.uk-transition-toggle:focus .uk-transition-scale-up, +.uk-transition-active.uk-active .uk-transition-scale-up { + opacity: 1; + transform: scale3d($transition-scale,$transition-scale,1); +} + +.uk-transition-toggle:hover .uk-transition-scale-down, +.uk-transition-toggle.uk-hover .uk-transition-scale-down, +.uk-transition-toggle:focus .uk-transition-scale-down, +.uk-transition-active.uk-active .uk-transition-scale-down { + opacity: 1; + transform: scale3d(1,1,1); +} + +/* + * Slide + */ + +[class*='uk-transition-slide'] { opacity: 0; } + +.uk-transition-slide-top { transform: translateY(-100%); } +.uk-transition-slide-bottom { transform: translateY(100%); } +.uk-transition-slide-left { transform: translateX(-100%); } +.uk-transition-slide-right { transform: translateX(100%); } + +.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); } +.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); } +.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); } +.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); } + +.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); } +.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); } +.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); } +.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); } + +/* Show */ +.uk-transition-toggle:hover [class*='uk-transition-slide'], +.uk-transition-toggle.uk-hover [class*='uk-transition-slide'], +.uk-transition-toggle:focus [class*='uk-transition-slide'], +.uk-transition-active.uk-active [class*='uk-transition-slide'] { + opacity: 1; + transform: translateX(0) translateY(0); +} + + +/* Opacity modifier +========================================================================== */ + +.uk-transition-opaque { opacity: 1; } + + +/* Duration modifiers +========================================================================== */ + +.uk-transition-slow { transition-duration: $transition-slow-duration; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-transition-misc)) {@include hook-transition-misc();} + +// @mixin hook-transition-misc(){} diff --git a/scss/uikit/components/utility.scss b/scss/uikit/components/utility.scss new file mode 100644 index 00000000..2d533870 --- /dev/null +++ b/scss/uikit/components/utility.scss @@ -0,0 +1,493 @@ +// Name: Utility +// Description: Utilities collection +// +// Component: `uk-panel-*` +// `uk-clearfix` +// `uk-float-*` +// `uk-overflow-*` +// `uk-resize-*` +// `uk-display-*` +// `uk-inline-*` +// `uk-responsive-*` +// `uk-preserve-width` +// `uk-border-*` +// `uk-box-shadow-*` +// `uk-box-shadow-bottom` +// `uk-dropcap` +// `uk-logo` +// `uk-blend-*` +// `uk-transform-*` +// `uk-transform-origin-*` +// +// States: `uk-disabled` +// `uk-drag` +// `uk-dragover` +// `uk-preserve` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$panel-scrollable-height: 170px !default; +$panel-scrollable-padding: 10px !default; +$panel-scrollable-border-width: $global-border-width !default; +$panel-scrollable-border: $global-border !default; + +$border-rounded-border-radius: 5px !default; + +$box-shadow-duration: 0.1s !default; + +$box-shadow-bottom-height: 30px !default; +$box-shadow-bottom-border-radius: 100% !default; +$box-shadow-bottom-background: #444 !default; +$box-shadow-bottom-blur: 20px !default; + +$dropcap-margin-right: 10px !default; +$dropcap-font-size: (($global-line-height * 3) * 1em) !default; + +$logo-font-size: $global-large-font-size !default; +$logo-font-family: $global-font-family !default; +$logo-color: $global-color !default; +$logo-hover-color: $global-color !default; + +$dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default; + + +/* ======================================================================== + Component: Utility + ========================================================================== */ + + +/* Panel + ========================================================================== */ + +.uk-panel { + position: relative; + box-sizing: border-box; +} + +/* + * Micro clearfix + */ + +.uk-panel::before, +.uk-panel::after { + content: ""; + display: table; +} + +.uk-panel::after { clear: both; } + +/* + * Remove margin from the last-child + */ + +.uk-panel > :last-child { margin-bottom: 0; } + + +/* + * Scrollable + */ + +.uk-panel-scrollable { + height: $panel-scrollable-height; + padding: $panel-scrollable-padding; + border: $panel-scrollable-border-width solid $panel-scrollable-border; + overflow: auto; + -webkit-overflow-scrolling: touch; + resize: both; + @if(mixin-exists(hook-panel-scrollable)) {@include hook-panel-scrollable();} +} + + +/* Clearfix + ========================================================================== */ + +/* + * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit + * 2. `table` is used again with `::after` because `clear` only works with block elements. + * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari + */ + +/* 1 */ +.uk-clearfix::before { + content: ""; + display: table-cell; +} + +/* 2 */ +.uk-clearfix::after { + content: ""; + display: table; + clear: both; +} + + +/* Float + ========================================================================== */ + +/* + * 1. Prevent content overflow + */ + +.uk-float-left { float: left; } +.uk-float-right { float: right; } + +/* 1 */ +[class*='uk-float-'] { max-width: 100%; } + + +/* Overfow + ========================================================================== */ + +.uk-overflow-hidden { overflow: hidden; } + +/* + * Enable scrollbars if content is clipped + * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518 + */ + +.uk-overflow-auto { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.uk-overflow-auto > :last-child { margin-bottom: 0; } + + +/* Resize + ========================================================================== */ + +.uk-resize { resize: both; } +.uk-resize-vertical { resize: vertical; } + + +/* Display + ========================================================================== */ + +.uk-display-block { display: block !important; } +.uk-display-inline { display: inline !important; } +.uk-display-inline-block { display: inline-block !important; } + + +/* Inline + ========================================================================== */ + +/* + * 1. Container fits its content + * 2. Create position context + * 3. Prevent content overflow + * 4. Behave like most inline-block elements + * 5. Force hardware acceleration without creating a new stacking context + * to fix 1px glitch when combined with overlays and transitions in Webkit + * 6. Clip child elements + */ + +[class*='uk-inline'] { + /* 1 */ + display: inline-block; + /* 2 */ + position: relative; + /* 3 */ + max-width: 100%; + /* 4 */ + vertical-align: middle; + /* 5 */ + -webkit-backface-visibility: hidden; +} + +.uk-inline-clip { + /* 6 */ + overflow: hidden; +} + + +/* Responsive objects + ========================================================================== */ + +/* + * Preserve original dimensions + * Because `img, `video`, `canvas` and `audio` are already responsive by default, see Base component + */ + +.uk-preserve-width, +.uk-preserve-width audio, +.uk-preserve-width canvas, +.uk-preserve-width img, +.uk-preserve-width svg, +.uk-preserve-width video { max-width: none; } + +/* + * Responsiveness + * Corrects `max-width` and `max-height` behavior if padding and border are used + */ + +.uk-responsive-width, +.uk-responsive-height { box-sizing: border-box; } + +/* + * 1. Set a maximum width. `important` needed to override `uk-preserve-width img` + * 2. Auto scale the height. Only needed if `height` attribute is present + */ + +.uk-responsive-width { + /* 1 */ + max-width: 100% !important; + /* 2 */ + height: auto; +} + +/* + * 1. Set a maximum height. Only works if the parent element has a fixed height + * 2. Auto scale the width. Only needed if `width` attribute is present + * 3. Reset max-width, which `img, `video`, `canvas` and `audio` already have by default + */ + +.uk-responsive-height { + /* 1 */ + max-height: 100%; + /* 2 */ + width: auto; + /* 3 */ + max-width: none; +} + + +/* Border + ========================================================================== */ + +.uk-border-circle { border-radius: 50%; } +.uk-border-rounded { border-radius: $border-rounded-border-radius; } + +/* + * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit + */ + +.uk-inline-clip[class*='uk-border-'] { -webkit-transform: translateZ(0); } + + +/* Box-shadow + ========================================================================== */ + +.uk-box-shadow-small { box-shadow: $global-small-box-shadow; } +.uk-box-shadow-medium { box-shadow: $global-medium-box-shadow; } +.uk-box-shadow-large { box-shadow: $global-large-box-shadow; } +.uk-box-shadow-xlarge { box-shadow: $global-xlarge-box-shadow; } + +/* + * Hover + */ + +[class*='uk-box-shadow-hover'] { transition: box-shadow $box-shadow-duration ease-in-out; } + +.uk-box-shadow-hover-small:hover { box-shadow: $global-small-box-shadow; } +.uk-box-shadow-hover-medium:hover { box-shadow: $global-medium-box-shadow; } +.uk-box-shadow-hover-large:hover { box-shadow: $global-large-box-shadow; } +.uk-box-shadow-hover-xlarge:hover { box-shadow: $global-xlarge-box-shadow; } + + +/* Box-shadow bottom + ========================================================================== */ + +/* + * 1. Set position. + * 2. Set style + * 3. Blur doesn't work on pseudo elements with negative `z-index` in Edge. + * Solved by using `before` and add position context to child elements. + */ + +@supports (filter: blur(0)) { + + .uk-box-shadow-bottom { + display: inline-block; + position: relative; + max-width: 100%; + vertical-align: middle; + } + + .uk-box-shadow-bottom::before { + content: ''; + /* 1 */ + position: absolute; + bottom: (-$box-shadow-bottom-height); + left: 0; + right: 0; + /* 2 */ + height: $box-shadow-bottom-height; + border-radius: $box-shadow-bottom-border-radius; + background: $box-shadow-bottom-background; + filter: blur($box-shadow-bottom-blur); + @if(mixin-exists(hook-box-shadow-bottom)) {@include hook-box-shadow-bottom();} + } + + /* 3 */ + .uk-box-shadow-bottom > * { position: relative; } + +} + + +/* Drop cap + ========================================================================== */ + +/* + * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements + * https://bugzilla.mozilla.org/show_bug.cgi?id=214004 + * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height` + * https://bugzilla.mozilla.org/show_bug.cgi?id=317933 + * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector + * This doubles the `font-size` exponential when using the `em` unit. + */ + +.uk-dropcap::first-letter, +/* 1 */ +.uk-dropcap > p:first-of-type::first-letter { + display: block; + margin-right: $dropcap-margin-right; + float: left; + font-size: $dropcap-font-size; + line-height: 1; + @if(mixin-exists(hook-dropcap)) {@include hook-dropcap();} +} + +/* 2 */ +@-moz-document url-prefix() { + + .uk-dropcap::first-letter, + .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; } + +} + +/* 3 */ +@supports (-ms-ime-align: auto) { + + .uk-dropcap > p:first-of-type::first-letter { font-size: 1em; } + +} + + +/* Logo + ========================================================================== */ + +/* + * 1. Required for `a` + */ + +.uk-logo { + font-size: $logo-font-size; + font-family: $logo-font-family; + color: $logo-color; + /* 1 */ + text-decoration: none; + @if(mixin-exists(hook-logo)) {@include hook-logo();} +} + +/* Hover + Focus */ +.uk-logo:hover, +.uk-logo:focus { + color: $logo-hover-color; + outline: none; + /* 1 */ + text-decoration: none; + @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();} +} + +.uk-logo-inverse { display: none; } + + +/* Disabled State + ========================================================================== */ + +.uk-disabled { pointer-events: none; } + + +/* Drag State + ========================================================================== */ + +/* + * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons + * 2. Fix dragging over iframes + */ + +.uk-drag, +/* 1 */ +.uk-drag * { cursor: move; } + +/* 2 */ +.uk-drag iframe { pointer-events: none; } + + +/* Dragover State + ========================================================================== */ + +/* + * Create a box-shadow when dragging a file over the upload area + */ + +.uk-dragover { box-shadow: $dragover-box-shadow; } + + +/* Blend modes + ========================================================================== */ + +.uk-blend-multiply { mix-blend-mode: multiply; } +.uk-blend-screen { mix-blend-mode: screen; } +.uk-blend-overlay { mix-blend-mode: overlay; } +.uk-blend-darken { mix-blend-mode: darken; } +.uk-blend-lighten { mix-blend-mode: lighten; } +.uk-blend-color-dodge { mix-blend-mode: color-dodge; } +.uk-blend-color-burn { mix-blend-mode: color-burn; } +.uk-blend-hard-light { mix-blend-mode: hard-light; } +.uk-blend-soft-light { mix-blend-mode: soft-light; } +.uk-blend-difference { mix-blend-mode: difference; } +.uk-blend-exclusion { mix-blend-mode: exclusion; } +.uk-blend-hue { mix-blend-mode: hue; } +.uk-blend-saturation { mix-blend-mode: saturation; } +.uk-blend-color { mix-blend-mode: color; } +.uk-blend-luminosity { mix-blend-mode: luminosity; } + + +/* Transform +========================================================================== */ + +.uk-transform-center { transform: translate(-50%, -50%); } + + +/* Transform Origin +========================================================================== */ + +.uk-transform-origin-top-left { transform-origin: 0 0; } +.uk-transform-origin-top-center { transform-origin: 50% 0; } +.uk-transform-origin-top-right { transform-origin: 100% 0; } +.uk-transform-origin-center-left { transform-origin: 0 50%; } +.uk-transform-origin-center-right { transform-origin: 100% 50%; } +.uk-transform-origin-bottom-left { transform-origin: 0 100%; } +.uk-transform-origin-bottom-center { transform-origin: 50% 100%; } +.uk-transform-origin-bottom-right { transform-origin: 100% 100%; } + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-utility-misc)) {@include hook-utility-misc();} + +// @mixin hook-panel-scrollable(){} +// @mixin hook-box-shadow-bottom(){} +// @mixin hook-dropcap(){} +// @mixin hook-logo(){} +// @mixin hook-logo-hover(){} +// @mixin hook-utility-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-logo-color: $inverse-global-color !default; +$inverse-logo-hover-color: $inverse-global-color !default; + + + +// @mixin hook-inverse-dropcap(){} +// @mixin hook-inverse-logo(){} +// @mixin hook-inverse-logo-hover(){} diff --git a/scss/uikit/components/variables.scss b/scss/uikit/components/variables.scss new file mode 100644 index 00000000..a08406a0 --- /dev/null +++ b/scss/uikit/components/variables.scss @@ -0,0 +1,117 @@ +// +// Component: Variables +// Description: Defines common values which are used across all components +// +// ======================================================================== + + +// Breakpoints +// ======================================================================== + +// Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736) +// Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414) +// Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280), +// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366), +// Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024) + +$breakpoint-small: 640px !default; // Phone landscape +$breakpoint-medium: 960px !default; // Tablet Landscape +$breakpoint-large: 1200px !default; // Desktop +$breakpoint-xlarge: 1600px !default; // Large Screens + +$breakpoint-xsmall-max: ($breakpoint-small - 1) !default; +$breakpoint-small-max: ($breakpoint-medium - 1) !default; +$breakpoint-medium-max: ($breakpoint-large - 1) !default; +$breakpoint-large-max: ($breakpoint-xlarge - 1) !default; + + +// Global variables +// ======================================================================== + +// +// Typography +// + +$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$global-font-size: 16px !default; +$global-line-height: 1.5 !default; // 24px + +$global-xxlarge-font-size: 2.625rem !default; // 42px +$global-xlarge-font-size: 2rem !default; // 32px +$global-large-font-size: 1.5rem !default; // 24px +$global-medium-font-size: 1.25rem !default; // 20px +$global-small-font-size: 0.875rem !default; // 14px + +// +// Colors +// + +$global-color: #666 !default; +$global-emphasis-color: #333 !default; +$global-muted-color: #999 !default; + +$global-link-color: #1e87f0 !default; +$global-link-hover-color: #0f6ecd !default; + +$global-inverse-color: #fff !default; + +// +// Backgrounds +// + +$global-background: #fff !default; + +$global-muted-background: #f8f8f8 !default; +$global-primary-background: #1e87f0 !default; +$global-secondary-background: #222 !default; + +$global-success-background: #32d296 !default; +$global-warning-background: #faa05a !default; +$global-danger-background: #f0506e !default; + +// +// Borders +// + +$global-border-width: 1px !default; +$global-border: #e5e5e5 !default; + +// +// Box-Shadows +// + +$global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default; +$global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default; +$global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default; +$global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default; + +// +// Spacings +// + +// Used in margin, section, list +$global-margin: 20px !default; +$global-small-margin: 10px !default; +$global-medium-margin: 40px !default; +$global-large-margin: 70px !default; +$global-xlarge-margin: 140px !default; + +// Used in grid, column, container, align, card, padding +$global-gutter: 30px !default; +$global-small-gutter: 15px !default; +$global-medium-gutter: 40px !default; +$global-large-gutter: 70px !default; + +// +// Controls +// + +$global-control-height: 40px !default; +$global-control-small-height: 30px !default; +$global-control-large-height: 55px !default; + +// +// Z-index +// + +$global-z-index: 1000 !default;
\ No newline at end of file diff --git a/scss/uikit/components/visibility.scss b/scss/uikit/components/visibility.scss new file mode 100644 index 00000000..ee800a15 --- /dev/null +++ b/scss/uikit/components/visibility.scss @@ -0,0 +1,151 @@ +// Name: Visibility +// Description: Utilities to show or hide content on breakpoints, hover or touch +// +// Component: `uk-hidden-*` +// `uk-visible-*` +// `uk-invisible` +// `uk-visible-toggle` +// `uk-hidden-hover` +// `uk-invisible-hover` +// `uk-hidden-touch` +// `uk-hidden-notouch` +// +// ======================================================================== + + +/* ======================================================================== + Component: Visibility + ========================================================================== */ + +/* + * Hidden + * `hidden` attribute also set here to make it stronger + */ + +[hidden], +.uk-hidden { display: none !important; } + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-hidden\@s { display: none !important; } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-hidden\@m { display: none !important; } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-hidden\@l { display: none !important; } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-hidden\@xl { display: none !important; } + +} + +/* + * Visible + */ + +/* Phone portrait and smaller */ +@media (max-width: $breakpoint-xsmall-max) { + + .uk-visible\@s { display: none !important; } + +} + +/* Phone landscape and smaller */ +@media (max-width: $breakpoint-small-max) { + + .uk-visible\@m { display: none !important; } + +} + +/* Tablet landscape and smaller */ +@media (max-width: $breakpoint-medium-max) { + + .uk-visible\@l { display: none !important; } + +} + +/* Desktop and smaller */ +@media (max-width: $breakpoint-large-max) { + + .uk-visible\@xl { display: none !important; } + +} + + +/* Visibility + ========================================================================== */ + +.uk-invisible { visibility: hidden !important; } + + +/* Hover + ========================================================================== */ + +/* + * Hidden + * Can't use `display: hidden` because it's not focusable. This is accessible through keyboard. + */ + +.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover:not(:focus) { + position: absolute !important; + width: 0 !important; + height: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; +} + +/* + * Invisible + * Can't use `visibility: hidden` because it's not focusable. This is accessible through keyboard. + */ + +.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-invisible-hover:not(:focus) { opacity: 0 !important; } + + +/* Touch + ========================================================================== */ + +/* + * Hide if primary pointing device has limited accuracy, e.g. a touch screen. + * Works on mobile browsers: Safari, Chrome and Android browser + */ + +@media (pointer: coarse) { + .uk-hidden-touch { display: none !important; } +} + +/* + * Hide if primary pointing device is accurate, e.g. mouse. + * 1. Fallback for IE11 and Firefox, because `pointer` is not supported + * 2. Reset if supported + */ + +/* 1 */ +.uk-hidden-notouch { display: none !important; } + +@media (pointer: coarse) { + .uk-hidden-notouch { display: block !important; } +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-visibility-misc)) {@include hook-visibility-misc();} + +// @mixin hook-visibility-misc(){} diff --git a/scss/uikit/components/width.scss b/scss/uikit/components/width.scss new file mode 100644 index 00000000..b6941321 --- /dev/null +++ b/scss/uikit/components/width.scss @@ -0,0 +1,397 @@ +// Name: Width +// Description: Utilities for widths +// +// Component: `uk-child-width-*` +// `uk-width-*` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$width-small-width: 150px !default; +$width-medium-width: 300px !default; +$width-large-width: 450px !default; +$width-xlarge-width: 600px !default; +$width-xxlarge-width: 750px !default; + + +/* ======================================================================== + Component: Width + ========================================================================== */ + + +/* Equal child widths + ========================================================================== */ + +[class*='uk-child-width'] > * { + box-sizing: border-box; + width: 100%; +} + +.uk-child-width-1-2 > * { width: 50%; } +.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); } +.uk-child-width-1-4 > * { width: 25%; } +.uk-child-width-1-5 > * { width: 20%; } +.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); } + +.uk-child-width-auto > * { width: auto; } + +/* + * Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide + * and the grid gutter is 0 pixels wide + */ + +.uk-child-width-expand > * { width: 1px; } + +/* + * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink + * below their minimum content size. To change this, set the min-width. + * Only needed for Firefox. All other browsers ignore this. + * + * 2. `width` is ignored when wrapping flex items in Safari + * https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items + */ + +.uk-child-width-expand > :not([class*='uk-width']) { + flex: 1; + /* 1 */ + min-width: 0; + /* 2 */ + flex-basis: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + .uk-child-width-1-1\@s > * { width: 100%; } + .uk-child-width-1-2\@s > * { width: 50%; } + .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@s > * { width: 25%; } + .uk-child-width-1-5\@s > * { width: 20%; } + .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@s > * { width: auto; } + .uk-child-width-expand\@s > * { width: 1px; } + + .uk-child-width-expand\@s > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + .uk-child-width-1-1\@m > * { width: 100%; } + .uk-child-width-1-2\@m > * { width: 50%; } + .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@m > * { width: 25%; } + .uk-child-width-1-5\@m > * { width: 20%; } + .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@m > * { width: auto; } + .uk-child-width-expand\@m > * { width: 1px; } + + .uk-child-width-expand\@m > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + .uk-child-width-1-1\@l > * { width: 100%; } + .uk-child-width-1-2\@l > * { width: 50%; } + .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@l > * { width: 25%; } + .uk-child-width-1-5\@l > * { width: 20%; } + .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@l > * { width: auto; } + .uk-child-width-expand\@l > * { width: 1px; } + + .uk-child-width-expand\@l > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + .uk-child-width-1-1\@xl > * { width: 100%; } + .uk-child-width-1-2\@xl > * { width: 50%; } + .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-child-width-1-4\@xl > * { width: 25%; } + .uk-child-width-1-5\@xl > * { width: 20%; } + .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); } + + .uk-child-width-auto\@xl > * { width: auto; } + .uk-child-width-expand\@xl > * { width: 1px; } + + .uk-child-width-expand\@xl > :not([class*='uk-width']) { + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + + +/* Single Widths + ========================================================================== */ + +/* + * 1. `max-width` is needed for the pixel-based classes + */ + +[class*='uk-width'] { + box-sizing: border-box; + width: 100%; + /* 1 */ + max-width: 100%; +} + +/* Halves */ +.uk-width-1-2 { width: 50%; } + +/* Thirds */ +.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); } +.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); } + +/* Quarters */ +.uk-width-1-4 { width: 25%; } +.uk-width-3-4 { width: 75%; } + +/* Fifths */ +.uk-width-1-5 { width: 20%; } +.uk-width-2-5 { width: 40%; } +.uk-width-3-5 { width: 60%; } +.uk-width-4-5 { width: 80%; } + +/* Sixths */ +.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); } +.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); } + +/* Pixel */ +.uk-width-small { width: $width-small-width; } +.uk-width-medium { width: $width-medium-width; } +.uk-width-large { width: $width-large-width; } +.uk-width-xlarge { width: $width-xlarge-width; } +.uk-width-xxlarge { width: $width-xxlarge-width; } + +/* Auto */ +.uk-width-auto { width: auto; } + +/* Expand */ +.uk-width-expand { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; +} + +/* Phone landscape and bigger */ +@media (min-width: $breakpoint-small) { + + /* Whole */ + .uk-width-1-1\@s { width: 100%; } + + /* Halves */ + .uk-width-1-2\@s { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@s { width: 25%; } + .uk-width-3-4\@s { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@s { width: 20%; } + .uk-width-2-5\@s { width: 40%; } + .uk-width-3-5\@s { width: 60%; } + .uk-width-4-5\@s { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@s { width: $width-small-width; } + .uk-width-medium\@s { width: $width-medium-width; } + .uk-width-large\@s { width: $width-large-width; } + .uk-width-xlarge\@s { width: $width-xlarge-width; } + .uk-width-xxlarge\@s { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@s { width: auto; } + + /* Expand */ + .uk-width-expand\@s { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Tablet landscape and bigger */ +@media (min-width: $breakpoint-medium) { + + /* Whole */ + .uk-width-1-1\@m { width: 100%; } + + /* Halves */ + .uk-width-1-2\@m { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@m { width: 25%; } + .uk-width-3-4\@m { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@m { width: 20%; } + .uk-width-2-5\@m { width: 40%; } + .uk-width-3-5\@m { width: 60%; } + .uk-width-4-5\@m { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@m { width: $width-small-width; } + .uk-width-medium\@m { width: $width-medium-width; } + .uk-width-large\@m { width: $width-large-width; } + .uk-width-xlarge\@m { width: $width-xlarge-width; } + .uk-width-xxlarge\@m { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@m { width: auto; } + + /* Expand */ + .uk-width-expand\@m { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Desktop and bigger */ +@media (min-width: $breakpoint-large) { + + /* Whole */ + .uk-width-1-1\@l { width: 100%; } + + /* Halves */ + .uk-width-1-2\@l { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@l { width: 25%; } + .uk-width-3-4\@l { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@l { width: 20%; } + .uk-width-2-5\@l { width: 40%; } + .uk-width-3-5\@l { width: 60%; } + .uk-width-4-5\@l { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@l { width: $width-small-width; } + .uk-width-medium\@l { width: $width-medium-width; } + .uk-width-large\@l { width: $width-large-width; } + .uk-width-xlarge\@l { width: $width-xlarge-width; } + .uk-width-xxlarge\@l { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@l { width: auto; } + + /* Expand */ + .uk-width-expand\@l { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + +/* Large screen and bigger */ +@media (min-width: $breakpoint-xlarge) { + + /* Whole */ + .uk-width-1-1\@xl { width: 100%; } + + /* Halves */ + .uk-width-1-2\@xl { width: 50%; } + + /* Thirds */ + .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); } + .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); } + + /* Quarters */ + .uk-width-1-4\@xl { width: 25%; } + .uk-width-3-4\@xl { width: 75%; } + + /* Fifths */ + .uk-width-1-5\@xl { width: 20%; } + .uk-width-2-5\@xl { width: 40%; } + .uk-width-3-5\@xl { width: 60%; } + .uk-width-4-5\@xl { width: 80%; } + + /* Sixths */ + .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); } + .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); } + + /* Pixel */ + .uk-width-small\@xl { width: $width-small-width; } + .uk-width-medium\@xl { width: $width-medium-width; } + .uk-width-large\@xl { width: $width-large-width; } + .uk-width-xlarge\@xl { width: $width-xlarge-width; } + .uk-width-xxlarge\@xl { width: $width-xxlarge-width; } + + /* Auto */ + .uk-width-auto\@xl { width: auto; } + + /* Expand */ + .uk-width-expand\@xl { + width: 1px; + flex: 1; + min-width: 0; + flex-basis: 1px; + } + +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-width-misc)) {@include hook-width-misc();} + +// @mixin hook-width-misc(){} |