updates
This commit is contained in:
56
client/uikit/src/scss/components/_import.components.scss
Normal file
56
client/uikit/src/scss/components/_import.components.scss
Normal file
@@ -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
|
||||
94
client/uikit/src/scss/components/_import.scss
vendored
Normal file
94
client/uikit/src/scss/components/_import.scss
vendored
Normal file
@@ -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";
|
||||
@import "progress.scss";
|
||||
|
||||
// Layout
|
||||
@import "section.scss";
|
||||
@import "container.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 "placeholder.scss";
|
||||
@import "badge.scss";
|
||||
@import "label.scss";
|
||||
@import "overlay.scss"; // After: Icon
|
||||
@import "article.scss";
|
||||
@import "comment.scss";
|
||||
@import "search.scss"; // After: Icon
|
||||
|
||||
// JavaScript
|
||||
@import "accordion.scss";
|
||||
@import "drop.scss"; // After: Card
|
||||
@import "dropdown.scss"; // After: Card
|
||||
@import "modal.scss"; // After: Close
|
||||
@import "slideshow.scss";
|
||||
@import "slider.scss";
|
||||
@import "sticky.scss";
|
||||
@import "offcanvas.scss";
|
||||
@import "switcher.scss";
|
||||
@import "leader.scss";
|
||||
@import "notification.scss";
|
||||
@import "tooltip.scss";
|
||||
@import "sortable.scss";
|
||||
@import "countdown.scss";
|
||||
// Scrollspy
|
||||
// Toggle
|
||||
// Scroll
|
||||
|
||||
@import "grid.scss";
|
||||
|
||||
// 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";
|
||||
@import "iconnav.scss";
|
||||
|
||||
@import "lightbox.scss"; // After: Close, Slidenav
|
||||
|
||||
// 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";
|
||||
19
client/uikit/src/scss/components/_import.utilities.scss
Normal file
19
client/uikit/src/scss/components/_import.utilities.scss
Normal file
@@ -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";
|
||||
105
client/uikit/src/scss/components/accordion.scss
Normal file
105
client/uikit/src/scss/components/accordion.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
// 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 */
|
||||
.uk-accordion-title:hover {
|
||||
color: $accordion-title-hover-color;
|
||||
text-decoration: none;
|
||||
@if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
|
||||
}
|
||||
|
||||
|
||||
/* Content
|
||||
========================================================================== */
|
||||
|
||||
.uk-accordion-content {
|
||||
display: flow-root;
|
||||
margin-top: $accordion-content-margin-top;
|
||||
@if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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-color !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-accordion-item(){}
|
||||
// @mixin hook-inverse-accordion-title(){}
|
||||
// @mixin hook-inverse-accordion-title-hover(){}
|
||||
146
client/uikit/src/scss/components/alert.scss
Normal file
146
client/uikit/src/scss/components/alert.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// 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: 15px !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
|
||||
*/
|
||||
|
||||
.uk-alert-close:hover {
|
||||
@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(){}
|
||||
142
client/uikit/src/scss/components/align.scss
Normal file
142
client/uikit/src/scss/components/align.scss
Normal file
@@ -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(){}
|
||||
283
client/uikit/src/scss/components/animation.scss
Normal file
283
client/uikit/src/scss/components/animation.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
// Name: Animation
|
||||
// Description: Utilities for keyframe animations
|
||||
//
|
||||
// Component: `uk-animation-*`
|
||||
//
|
||||
// Modifiers: `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`
|
||||
// `uk-animation-stroke`
|
||||
// `uk-animation-reverse`
|
||||
// `uk-animation-fast`
|
||||
//
|
||||
// Sub-objects: `uk-animation-toggle`
|
||||
//
|
||||
// States: `uk-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$animation-duration: 0.5s !default;
|
||||
$animation-fade-duration: 0.8s !default;
|
||||
$animation-stroke-duration: 2s !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: $animation-duration ease-out both; }
|
||||
|
||||
|
||||
/* Animations
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 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, uk-scale-up; }
|
||||
.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
|
||||
|
||||
/*
|
||||
* Slide
|
||||
*/
|
||||
|
||||
.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
|
||||
.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
|
||||
.uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
|
||||
.uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
|
||||
|
||||
/*
|
||||
* Slide Small
|
||||
*/
|
||||
|
||||
.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
|
||||
.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
|
||||
.uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
|
||||
.uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
|
||||
|
||||
/*
|
||||
* Slide Medium
|
||||
*/
|
||||
|
||||
.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
|
||||
.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
|
||||
.uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
|
||||
.uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
|
||||
|
||||
/*
|
||||
* Kenburns
|
||||
*/
|
||||
|
||||
.uk-animation-kenburns {
|
||||
animation-name: uk-kenburns;
|
||||
animation-duration: $animation-kenburns-duration;
|
||||
}
|
||||
|
||||
/*
|
||||
* Shake
|
||||
*/
|
||||
|
||||
.uk-animation-shake { animation-name: uk-shake; }
|
||||
|
||||
/*
|
||||
* SVG Stroke
|
||||
* The `--uk-animation-stroke` custom property contains the longest path length.
|
||||
* Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
|
||||
* All strokes are animated by the same pace and doesn't end simultaneously.
|
||||
* To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
|
||||
*/
|
||||
|
||||
.uk-animation-stroke {
|
||||
animation-name: uk-stroke;
|
||||
animation-duration: $animation-stroke-duration;
|
||||
stroke-dasharray: var(--uk-animation-stroke);
|
||||
}
|
||||
|
||||
|
||||
/* Direction modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-animation-reverse {
|
||||
animation-direction: reverse;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
|
||||
/* Duration modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-animation-fast { animation-duration: $animation-fast-duration; }
|
||||
|
||||
|
||||
/* Toggle animation based on the State of the Parent Element
|
||||
========================================================================== */
|
||||
|
||||
.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
|
||||
|
||||
|
||||
/* Keyframes used by animation classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Fade
|
||||
*/
|
||||
|
||||
@keyframes uk-fade {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/*
|
||||
* Scale
|
||||
*/
|
||||
|
||||
@keyframes uk-scale-up {
|
||||
0% { transform: scale(0.9); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes uk-scale-down {
|
||||
0% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide
|
||||
*/
|
||||
|
||||
@keyframes uk-slide-top {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-bottom {
|
||||
0% { transform: translateY(100%); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-left {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-right {
|
||||
0% { transform: translateX(100%); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide Small
|
||||
*/
|
||||
|
||||
@keyframes uk-slide-top-small {
|
||||
0% { transform: translateY(-$animation-slide-small-translate); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-bottom-small {
|
||||
0% { transform: translateY($animation-slide-small-translate); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-left-small {
|
||||
0% { transform: translateX(-$animation-slide-small-translate); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-right-small {
|
||||
0% { transform: translateX($animation-slide-small-translate); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide Medium
|
||||
*/
|
||||
|
||||
@keyframes uk-slide-top-medium {
|
||||
0% { transform: translateY(-$animation-slide-medium-translate); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-bottom-medium {
|
||||
0% { transform: translateY($animation-slide-medium-translate); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-left-medium {
|
||||
0% { transform: translateX(-$animation-slide-medium-translate); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes uk-slide-right-medium {
|
||||
0% { transform: translateX($animation-slide-medium-translate); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Kenburns
|
||||
*/
|
||||
|
||||
@keyframes uk-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); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Stroke
|
||||
*/
|
||||
|
||||
@keyframes uk-stroke {
|
||||
0% { stroke-dashoffset: var(--uk-animation-stroke); }
|
||||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();}
|
||||
|
||||
// @mixin hook-animation-misc(){}
|
||||
99
client/uikit/src/scss/components/article.scss
Normal file
99
client/uikit/src/scss/components/article.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
// 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-2xlarge-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 {
|
||||
display: flow-root;
|
||||
@if(mixin-exists(hook-article)) {@include hook-article();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
148
client/uikit/src/scss/components/background.scss
Normal file
148
client/uikit/src/scss/components/background.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
// 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,
|
||||
.uk-background-width-1-1,
|
||||
.uk-background-height-1-1 {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.uk-background-cover { background-size: cover; }
|
||||
.uk-background-contain { background-size: contain; }
|
||||
.uk-background-width-1-1 { background-size: 100%; }
|
||||
.uk-background-height-1-1 { background-size: auto 100%; }
|
||||
|
||||
|
||||
/* 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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
|
||||
*/
|
||||
|
||||
.uk-background-fixed {
|
||||
background-attachment: fixed;
|
||||
/* 1 */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
78
client/uikit/src/scss/components/badge.scss
Normal file
78
client/uikit/src/scss/components/badge.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
// Name: Badge
|
||||
// Description: Component to create notification badges
|
||||
//
|
||||
// Component: `uk-badge`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$badge-size: 18px !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: 11px !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 !important;
|
||||
font-size: $badge-font-size;
|
||||
/* 2 */
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
@if(mixin-exists(hook-badge)) {@include hook-badge();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Required for `a`
|
||||
*/
|
||||
|
||||
.uk-badge:hover {
|
||||
text-decoration: 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;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-badge(){}
|
||||
// @mixin hook-inverse-badge-hover(){}
|
||||
653
client/uikit/src/scss/components/base.scss
Normal file
653
client/uikit/src/scss/components/base.scss
Normal file
@@ -0,0 +1,653 @@
|
||||
// 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-2xlarge-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-focus-outline-width: 2px !default;
|
||||
$base-focus-outline-style: dotted !default;
|
||||
$base-focus-outline: $global-emphasis-color !default;
|
||||
$base-focus-outline-offset: 1px !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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 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,
|
||||
.uk-link-toggle:hover .uk-link {
|
||||
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. Add the correct text decoration in Edge.
|
||||
* 2. The shorthand declaration `underline dotted` is not supported in Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
/* 1 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
-webkit-text-decoration-style: 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; }
|
||||
|
||||
/*
|
||||
* 1. Add responsiveness.
|
||||
* 2. Auto-scale the height. Only needed if `height` attribute is present.
|
||||
* 3. Corrects responsive `max-width` behavior if padding and border are used.
|
||||
* 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
|
||||
*/
|
||||
|
||||
canvas,
|
||||
img,
|
||||
video {
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 2 */
|
||||
height: auto;
|
||||
/* 3 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 4 */
|
||||
@supports (display: block) {
|
||||
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
/*
|
||||
* 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
|
||||
* 2. Hide `alt` text for lazy loading images.
|
||||
* Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
|
||||
*/
|
||||
|
||||
img:not([src]) {
|
||||
/* 1 */
|
||||
min-width: 1px;
|
||||
/* 2 */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Iframe
|
||||
* Remove border in all browsers
|
||||
*/
|
||||
|
||||
iframe { border: 0; }
|
||||
|
||||
|
||||
/* 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,
|
||||
.uk-heading-small,
|
||||
.uk-heading-medium,
|
||||
.uk-heading-large,
|
||||
.uk-heading-xlarge,
|
||||
.uk-heading-2xlarge {
|
||||
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,
|
||||
* + .uk-heading-small,
|
||||
* + .uk-heading-medium,
|
||||
* + .uk-heading-large,
|
||||
* + .uk-heading-xlarge,
|
||||
* + .uk-heading-2xlarge { 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. Show the overflow in Chrome, Edge and IE.
|
||||
* 2. Add the correct text-align in Edge and IE.
|
||||
* 3. Style
|
||||
*/
|
||||
|
||||
hr, .uk-hr {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */
|
||||
text-align: inherit;
|
||||
/* 3 */
|
||||
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; }
|
||||
|
||||
|
||||
/* Focus
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
|
||||
* 1. Fallback: Remove `:focus` for a negative tabindexes.
|
||||
* 2. Fallback: Set `:focus` style but not for negative tabindexes.
|
||||
* 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
|
||||
* 4. Set `:focus-visible` style for browsers which support it.
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
:focus { outline: none; }
|
||||
|
||||
/* 2 */
|
||||
:focus:not([tabindex^='-']) {
|
||||
outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline;
|
||||
outline-offset: $base-focus-outline-offset;
|
||||
}
|
||||
|
||||
/* 3 */
|
||||
:focus:not(:focus-visible) { outline: none; }
|
||||
|
||||
/* 4 */
|
||||
:focus-visible { outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline; }
|
||||
|
||||
|
||||
/* Selection pseudo-element
|
||||
========================================================================== */
|
||||
|
||||
::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; }
|
||||
|
||||
|
||||
/* Pass media breakpoints to JS
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Breakpoints
|
||||
*/
|
||||
|
||||
.uk-breakpoint-s::before { content: '#{$breakpoint-small}'; }
|
||||
.uk-breakpoint-m::before { content: '#{$breakpoint-medium}'; }
|
||||
.uk-breakpoint-l::before { content: '#{$breakpoint-large}'; }
|
||||
.uk-breakpoint-xl::before { content: '#{$breakpoint-xlarge}'; }
|
||||
|
||||
:root {
|
||||
--uk-breakpoint-s: #{$breakpoint-small};
|
||||
--uk-breakpoint-m: #{$breakpoint-medium};
|
||||
--uk-breakpoint-l: #{$breakpoint-large};
|
||||
--uk-breakpoint-xl: #{$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;
|
||||
$inverse-base-focus-outline: $inverse-global-emphasis-color !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(){}
|
||||
122
client/uikit/src/scss/components/breadcrumb.scss
Normal file
122
client/uikit/src/scss/components/breadcrumb.scss
Normal file
@@ -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-font-size: $breadcrumb-item-font-size !default;
|
||||
$breadcrumb-divider-color: $global-muted-color !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Breadcrumb
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Reset list
|
||||
*/
|
||||
|
||||
.uk-breadcrumb {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Doesn't generate any box and replaced by child boxes
|
||||
*/
|
||||
|
||||
.uk-breadcrumb > * { display: contents; }
|
||||
|
||||
|
||||
/* Items
|
||||
========================================================================== */
|
||||
|
||||
.uk-breadcrumb > * > * {
|
||||
font-size: $breadcrumb-item-font-size;
|
||||
color: $breadcrumb-item-color;
|
||||
@if(mixin-exists(hook-breadcrumb-item)) {@include hook-breadcrumb-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-breadcrumb > * > :hover {
|
||||
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 > span,
|
||||
.uk-breadcrumb > :last-child > a:not([href]) {
|
||||
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
|
||||
* 1. Remove space between inline block elements.
|
||||
* 2. Style
|
||||
*/
|
||||
|
||||
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
|
||||
content: $breadcrumb-divider;
|
||||
display: inline-block;
|
||||
/* 1 */
|
||||
margin: 0 $breadcrumb-divider-margin-horizontal 0 unquote('calc(#{$breadcrumb-divider-margin-horizontal} - 4px)');
|
||||
/* 2 */
|
||||
font-size: $breadcrumb-divider-font-size;
|
||||
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(){}
|
||||
439
client/uikit/src/scss/components/button.scss
Normal file
439
client/uikit/src/scss/components/button.scss
Normal file
@@ -0,0 +1,439 @@
|
||||
// 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-emphasis-color !default;
|
||||
$button-text-hover-color: $global-muted-color !default;
|
||||
$button-text-disabled-color: $global-muted-color !default;
|
||||
|
||||
$button-link-line-height: $global-line-height !default;
|
||||
$button-link-color: $global-emphasis-color !default;
|
||||
$button-link-hover-color: $global-muted-color !default;
|
||||
$button-link-hover-text-decoration: none !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. Address `overflow` set to `hidden` in IE.
|
||||
* 4. Correct `font` properties and `color` not being inherited for `button`.
|
||||
* 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 6. Remove default style for `input type="submit"`in iOS.
|
||||
* 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 */
|
||||
overflow: visible;
|
||||
/* 4 */
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
/* 5 */
|
||||
text-transform: none;
|
||||
/* 6 */
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
/* 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 {
|
||||
/* 9 */
|
||||
text-decoration: none;
|
||||
@if(mixin-exists(hook-button-hover)) {@include hook-button-hover();}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.uk-button-default:hover {
|
||||
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 */
|
||||
.uk-button-primary:hover {
|
||||
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 */
|
||||
.uk-button-secondary:hover {
|
||||
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 */
|
||||
.uk-button-danger:hover {
|
||||
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 */
|
||||
.uk-button-text:hover {
|
||||
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 */
|
||||
.uk-button-link:hover {
|
||||
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-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-emphasis-color !default;
|
||||
$inverse-button-text-hover-color: $inverse-global-muted-color !default;
|
||||
$inverse-button-text-disabled-color: $inverse-global-muted-color !default;
|
||||
$inverse-button-link-color: $inverse-global-emphasis-color !default;
|
||||
$inverse-button-link-hover-color: $inverse-global-muted-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(){}
|
||||
384
client/uikit/src/scss/components/card.scss
Normal file
384
client/uikit/src/scss/components/card.scss
Normal file
@@ -0,0 +1,384 @@
|
||||
// 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 * 0.5)) !default;
|
||||
|
||||
$card-header-padding-horizontal-l: $global-medium-gutter !default;
|
||||
$card-header-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
|
||||
|
||||
$card-footer-padding-horizontal: $global-gutter !default;
|
||||
$card-footer-padding-vertical: ($global-gutter * 0.5) !default;
|
||||
|
||||
$card-footer-padding-horizontal-l: $global-medium-gutter !default;
|
||||
$card-footer-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
|
||||
|
||||
$card-title-font-size: $global-large-font-size !default;
|
||||
$card-title-line-height: 1.4 !default;
|
||||
|
||||
$card-badge-top: 15px !default;
|
||||
$card-badge-right: 15px !default;
|
||||
$card-badge-height: 22px !default;
|
||||
$card-badge-padding-horizontal: 10px !default;
|
||||
$card-badge-background: $global-primary-background !default;
|
||||
$card-badge-color: $global-inverse-color !default;
|
||||
$card-badge-font-size: $global-small-font-size !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 * 0.66667)) !default;
|
||||
$card-small-footer-padding-horizontal: $global-margin !default;
|
||||
$card-small-footer-padding-vertical: round(($global-margin * 0.66667)) !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 * 0.5)) !default;
|
||||
$card-large-footer-padding-horizontal-l: $global-large-gutter !default;
|
||||
$card-large-footer-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Card
|
||||
========================================================================== */
|
||||
|
||||
.uk-card {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@if(mixin-exists(hook-card)) {@include hook-card();}
|
||||
}
|
||||
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
.uk-card-body {
|
||||
display: flow-root;
|
||||
padding: $card-body-padding-vertical $card-body-padding-horizontal;
|
||||
@if(mixin-exists(hook-card-body)) {@include hook-card-body();}
|
||||
}
|
||||
|
||||
.uk-card-header {
|
||||
display: flow-root;
|
||||
padding: $card-header-padding-vertical $card-header-padding-horizontal;
|
||||
@if(mixin-exists(hook-card-header)) {@include hook-card-header();}
|
||||
}
|
||||
|
||||
.uk-card-footer {
|
||||
display: flow-root;
|
||||
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; }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* 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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Position
|
||||
* 2. Size
|
||||
* 3. Style
|
||||
* 4. Center child vertically
|
||||
*/
|
||||
|
||||
.uk-card-badge {
|
||||
/* 1 */
|
||||
position: absolute;
|
||||
top: $card-badge-top;
|
||||
right: $card-badge-right;
|
||||
z-index: 1;
|
||||
/* 2 */
|
||||
height: $card-badge-height;
|
||||
padding: 0 $card-badge-padding-horizontal;
|
||||
/* 3 */
|
||||
background: $card-badge-background;
|
||||
color: $card-badge-color;
|
||||
font-size: $card-badge-font-size;
|
||||
/* 4 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
@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-color: $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-color: $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-color: $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-color: $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(){}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
$inverse-card-badge-background: $inverse-global-primary-background !default;
|
||||
$inverse-card-badge-color: $inverse-global-inverse-color !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-card-badge(){}
|
||||
55
client/uikit/src/scss/components/close.scss
Normal file
55
client/uikit/src/scss/components/close.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// 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 */
|
||||
.uk-close:hover {
|
||||
color: $close-hover-color;
|
||||
@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(){}
|
||||
139
client/uikit/src/scss/components/column.scss
Normal file
139
client/uikit/src/scss/components/column.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
// 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;
|
||||
|
||||
|
||||
160
client/uikit/src/scss/components/comment.scss
Normal file
160
client/uikit/src/scss/components/comment.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
// 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 {
|
||||
display: flow-root;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
@if(mixin-exists(hook-comment-body)) {@include hook-comment-body();}
|
||||
}
|
||||
|
||||
.uk-comment-header {
|
||||
display: flow-root;
|
||||
margin-bottom: $comment-header-margin-bottom;
|
||||
@if(mixin-exists(hook-comment-header)) {@include hook-comment-header();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
185
client/uikit/src/scss/components/container.scss
Normal file
185
client/uikit/src/scss/components/container.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
// Name: Container
|
||||
// Description: Component to align and center your site and grid content
|
||||
//
|
||||
// Component: `uk-container`
|
||||
//
|
||||
// Modifier: `uk-container-small`
|
||||
// `uk-container-large`
|
||||
// `uk-container-expand`
|
||||
// `uk-container-expand-left`
|
||||
// `uk-container-expand-right`
|
||||
// `uk-container-item-padding-remove-left`
|
||||
// `uk-container-item-padding-remove-right`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$container-max-width: 1200px !default;
|
||||
$container-xsmall-max-width: 750px !default;
|
||||
$container-small-max-width: 900px !default;
|
||||
$container-large-max-width: 1400px !default;
|
||||
$container-xlarge-max-width: 1600px !default;
|
||||
|
||||
$container-padding-horizontal: 15px !default;
|
||||
$container-padding-horizontal-s: $global-gutter !default;
|
||||
$container-padding-horizontal-m: $global-medium-gutter !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Container
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Box sizing has to be `content-box` so the max-width is always the same and
|
||||
* unaffected by the padding on different breakpoints. It's important for the size modifiers.
|
||||
*/
|
||||
|
||||
.uk-container {
|
||||
display: flow-root;
|
||||
/* 1 */
|
||||
box-sizing: content-box;
|
||||
max-width: $container-max-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $container-padding-horizontal;
|
||||
padding-right: $container-padding-horizontal;
|
||||
}
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container {
|
||||
padding-left: $container-padding-horizontal-s;
|
||||
padding-right: $container-padding-horizontal-s;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container {
|
||||
padding-left: $container-padding-horizontal-m;
|
||||
padding-right: $container-padding-horizontal-m;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-container > :last-child { margin-bottom: 0; }
|
||||
|
||||
/*
|
||||
* Remove padding from nested containers
|
||||
*/
|
||||
|
||||
.uk-container .uk-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Size modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-container-xsmall { max-width: $container-xsmall-max-width; }
|
||||
|
||||
.uk-container-small { max-width: $container-small-max-width; }
|
||||
|
||||
.uk-container-large { max-width: $container-large-max-width; }
|
||||
|
||||
.uk-container-xlarge { max-width: $container-xlarge-max-width; }
|
||||
|
||||
.uk-container-expand { max-width: none; }
|
||||
|
||||
|
||||
/* Expand modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Expand one side only
|
||||
*/
|
||||
|
||||
.uk-container-expand-left { margin-left: 0; }
|
||||
.uk-container-expand-right { margin-right: 0; }
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container-expand-left.uk-container-xsmall,
|
||||
.uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-s})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-small,
|
||||
.uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-s})'); }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container-expand-left,
|
||||
.uk-container-expand-right { max-width: unquote('calc(50% + (#{$container-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-xsmall,
|
||||
.uk-container-expand-right.uk-container-xsmall { max-width: unquote('calc(50% + (#{$container-xsmall-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-small,
|
||||
.uk-container-expand-right.uk-container-small { max-width: unquote('calc(50% + (#{$container-small-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-large,
|
||||
.uk-container-expand-right.uk-container-large { max-width: unquote('calc(50% + (#{$container-large-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
.uk-container-expand-left.uk-container-xlarge,
|
||||
.uk-container-expand-right.uk-container-xlarge { max-width: unquote('calc(50% + (#{$container-xlarge-max-width} / 2) - #{$container-padding-horizontal-m})'); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Utility classes to reset container padding on the left or right side
|
||||
* Note: It has to be negative margin on the item, because it's specific to the item.
|
||||
*/
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal); }
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-s); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-s); }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-container-item-padding-remove-left,
|
||||
.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})') }
|
||||
|
||||
.uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-m); }
|
||||
.uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-m); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-container-misc)) {@include hook-container-misc();}
|
||||
|
||||
// @mixin hook-container-misc(){}
|
||||
131
client/uikit/src/scss/components/countdown.scss
Normal file
131
client/uikit/src/scss/components/countdown.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
// Name: Countdown
|
||||
// Description: Component to create countdown timers
|
||||
//
|
||||
// Component: `uk-countdown`
|
||||
//
|
||||
// Sub-objects: `uk-countdown-number`
|
||||
// `uk-countdown-separator`
|
||||
// `uk-countdown-label`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$countdown-number-line-height: 0.8 !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-line-height: 1.6 !default;
|
||||
$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
|
||||
========================================================================== */
|
||||
|
||||
.uk-countdown-number,
|
||||
.uk-countdown-separator {
|
||||
@if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
|
||||
}
|
||||
|
||||
|
||||
/* Number
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/*
|
||||
* 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
|
||||
* 2. Style
|
||||
*/
|
||||
|
||||
.uk-countdown-number {
|
||||
/* 1 */
|
||||
font-variant-numeric: tabular-nums;
|
||||
/* 2 */
|
||||
font-size: $countdown-number-font-size;
|
||||
line-height: $countdown-number-line-height;
|
||||
@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;
|
||||
line-height: $countdown-separator-line-height;
|
||||
@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(){}
|
||||
63
client/uikit/src/scss/components/cover.scss
Normal file
63
client/uikit/src/scss/components/cover.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// 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. Use attribute to apply transform instantly. Needed if transform is transitioned.
|
||||
* 2. Reset responsiveness for embedded content
|
||||
* 3. Center object
|
||||
* Note: Percent values on the `top` property only works if this element
|
||||
* is absolute positioned or if the container has a height
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
[uk-cover],
|
||||
[data-uk-cover] {
|
||||
/* 2 */
|
||||
max-width: none;
|
||||
/* 3 */
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
--uk-position-translate-x: -50%;
|
||||
--uk-position-translate-y: -50%;
|
||||
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
|
||||
}
|
||||
|
||||
iframe[uk-cover],
|
||||
iframe[data-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(){}
|
||||
71
client/uikit/src/scss/components/description-list.scss
Normal file
71
client/uikit/src/scss/components/description-list.scss
Normal file
@@ -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(){}
|
||||
153
client/uikit/src/scss/components/divider.scss
Normal file
153
client/uikit/src/scss/components/divider.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
// Name: Divider
|
||||
// Description: Styles for dividers
|
||||
//
|
||||
// Component: `uk-divider-icon`
|
||||
// `uk-divider-small`
|
||||
// `uk-divider-vertical`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// 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;
|
||||
|
||||
$divider-vertical-height: 100px !default;
|
||||
$divider-vertical-border-width: $global-border-width !default;
|
||||
$divider-vertical-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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Fix height because of `inline-block`
|
||||
* 2. Using ::after and inline-block to make `text-align` work
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
.uk-divider-small { line-height: 0; }
|
||||
|
||||
/* 2 */
|
||||
.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();}
|
||||
}
|
||||
|
||||
|
||||
/* Vertical
|
||||
========================================================================== */
|
||||
|
||||
.uk-divider-vertical {
|
||||
width: max-content;
|
||||
height: $divider-vertical-height;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-left: $divider-vertical-border-width solid $divider-vertical-border;
|
||||
@if(mixin-exists(hook-divider-vertical)) {@include hook-divider-vertical();}
|
||||
}
|
||||
|
||||
|
||||
// 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-vertical(){}
|
||||
// @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;
|
||||
$inverse-divider-vertical-border: $inverse-global-border !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-divider-icon(){}
|
||||
// @mixin hook-inverse-divider-icon-line(){}
|
||||
// @mixin hook-inverse-divider-small(){}
|
||||
// @mixin hook-inverse-divider-vertical(){}
|
||||
155
client/uikit/src/scss/components/dotnav.scss
Normal file
155
client/uikit/src/scss/components/dotnav.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
// 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 */
|
||||
.uk-dotnav > * > :hover {
|
||||
background-color: $dotnav-item-hover-background;
|
||||
@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(){}
|
||||
74
client/uikit/src/scss/components/drop.scss
Normal file
74
client/uikit/src/scss/components/drop.scss
Normal file
@@ -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(){}
|
||||
151
client/uikit/src/scss/components/dropdown.scss
Normal file
151
client/uikit/src/scss/components/dropdown.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
// 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`
|
||||
//
|
||||
// States: `uk-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// 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 + Active */
|
||||
.uk-dropdown-nav > li > a:hover,
|
||||
.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 li.uk-active > a { 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(){}
|
||||
209
client/uikit/src/scss/components/flex.scss
Normal file
209
client/uikit/src/scss/components/flex.scss
Normal file
@@ -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(){}
|
||||
186
client/uikit/src/scss/components/form-range.scss
Normal file
186
client/uikit/src/scss/components/form-range.scss
Normal file
@@ -0,0 +1,186 @@
|
||||
// Name: Form Range
|
||||
// Description: Styles for the range input type
|
||||
//
|
||||
// Component: `uk-range`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$form-range-thumb-height: 15px !default;
|
||||
$form-range-thumb-width: $form-range-thumb-height !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($form-range-track-background, 5%) !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 * 0.5)) * -1);
|
||||
/* 2 */
|
||||
height: $form-range-thumb-height;
|
||||
width: $form-range-thumb-width;
|
||||
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-width;
|
||||
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-width;
|
||||
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(){}
|
||||
811
client/uikit/src/scss/components/form.scss
Normal file
811
client/uikit/src/scss/components/form.scss
Normal file
@@ -0,0 +1,811 @@
|
||||
// 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: round($form-padding-horizontal * 0.6) !default;
|
||||
|
||||
$form-background: $global-muted-background !default;
|
||||
$form-color: $global-color !default;
|
||||
|
||||
$form-focus-background: darken($form-background, 5%) !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-padding-vertical: round($form-small-padding-horizontal * 0.6) !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-padding-vertical: round($form-large-padding-horizontal * 0.6) !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: $global-color !default;
|
||||
$form-select-disabled-icon-color: $global-muted-color !default;
|
||||
|
||||
$form-datalist-padding-right: 20px !default;
|
||||
$form-datalist-icon-color: $global-color !default;
|
||||
|
||||
$form-radio-size: 16px !default;
|
||||
$form-radio-margin-top: -4px !default;
|
||||
$form-radio-background: darken($global-muted-background, 5%) !default;
|
||||
|
||||
$form-radio-focus-background: darken($form-radio-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-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-datalist-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%2012%208%206%2016%206%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();}
|
||||
}
|
||||
|
||||
.uk-select[multiple],
|
||||
.uk-select[size] { resize: vertical; }
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* Single-line */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Multi-line */
|
||||
textarea.uk-form-small,
|
||||
[multiple].uk-form-small,
|
||||
[size].uk-form-small { padding: $form-small-padding-vertical $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; }
|
||||
|
||||
/* Single-line */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Multi-line */
|
||||
textarea.uk-form-large,
|
||||
[multiple].uk-form-large,
|
||||
[size].uk-form-large { padding: $form-large-padding-vertical $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); }
|
||||
|
||||
|
||||
/* Datalist
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Remove default style in Chrome
|
||||
*/
|
||||
|
||||
.uk-input[list] {
|
||||
padding-right: $form-datalist-padding-right;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.uk-input[list]:hover,
|
||||
.uk-input[list]:focus { @include svg-fill($internal-form-datalist-image, "#000", $form-datalist-icon-color); }
|
||||
|
||||
/* 1 */
|
||||
.uk-input[list]::-webkit-calendar-picker-indicator { display: none !important; }
|
||||
|
||||
|
||||
/* 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 {
|
||||
background-color: $form-radio-focus-background;
|
||||
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: fadein($inverse-form-background, 5%) !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-datalist-icon-color: $inverse-global-color !default;
|
||||
|
||||
$inverse-form-radio-background: $inverse-global-muted-background !default;
|
||||
|
||||
$inverse-form-radio-focus-background: fadein($inverse-form-radio-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: fadein($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(){}
|
||||
69
client/uikit/src/scss/components/grid-masonry.scss
Normal file
69
client/uikit/src/scss/components/grid-masonry.scss
Normal file
@@ -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; }
|
||||
|
||||
407
client/uikit/src/scss/components/grid.scss
Normal file
407
client/uikit/src/scss/components/grid.scss
Normal file
@@ -0,0 +1,407 @@
|
||||
// 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,
|
||||
.uk-grid-column-small { margin-left: (-$grid-small-gutter-horizontal); }
|
||||
.uk-grid-small > *,
|
||||
.uk-grid-column-small > * { padding-left: $grid-small-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid + .uk-grid-small,
|
||||
.uk-grid + .uk-grid-row-small,
|
||||
.uk-grid-small > .uk-grid-margin,
|
||||
.uk-grid-row-small > .uk-grid-margin,
|
||||
* + .uk-grid-margin-small { margin-top: $grid-small-gutter-vertical; }
|
||||
|
||||
/*
|
||||
* Medium
|
||||
*/
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-medium,
|
||||
.uk-grid-column-medium { margin-left: (-$grid-medium-gutter-horizontal); }
|
||||
.uk-grid-medium > *,
|
||||
.uk-grid-column-medium > * { padding-left: $grid-medium-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid + .uk-grid-medium,
|
||||
.uk-grid + .uk-grid-row-medium,
|
||||
.uk-grid-medium > .uk-grid-margin,
|
||||
.uk-grid-row-medium > .uk-grid-margin,
|
||||
* + .uk-grid-margin-medium { margin-top: $grid-medium-gutter-vertical; }
|
||||
|
||||
/*
|
||||
* Large
|
||||
*/
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-large,
|
||||
.uk-grid-column-large { margin-left: (-$grid-large-gutter-horizontal); }
|
||||
.uk-grid-large > *,
|
||||
.uk-grid-column-large > * { padding-left: $grid-large-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid + .uk-grid-large,
|
||||
.uk-grid + .uk-grid-row-large,
|
||||
.uk-grid-large > .uk-grid-margin,
|
||||
.uk-grid-row-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,
|
||||
.uk-grid-column-large { margin-left: (-$grid-large-gutter-horizontal-l); }
|
||||
.uk-grid-large > *,
|
||||
.uk-grid-column-large > * { padding-left: $grid-large-gutter-horizontal-l; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid + .uk-grid-large,
|
||||
.uk-grid + .uk-grid-row-large,
|
||||
.uk-grid-large > .uk-grid-margin,
|
||||
.uk-grid-row-large > .uk-grid-margin,
|
||||
* + .uk-grid-margin-large { margin-top: $grid-large-gutter-vertical-l; }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Collapse
|
||||
*/
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-collapse,
|
||||
.uk-grid-column-collapse { margin-left: 0; }
|
||||
.uk-grid-collapse > *,
|
||||
.uk-grid-column-collapse > * { padding-left: 0; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid + .uk-grid-collapse,
|
||||
.uk-grid + .uk-grid-row-collapse,
|
||||
.uk-grid-collapse > .uk-grid-margin,
|
||||
.uk-grid-row-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;
|
||||
@if(mixin-exists(hook-grid-divider-horizontal)) {@include hook-grid-divider-horizontal();}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
@if(mixin-exists(hook-grid-divider-vertical)) {@include hook-grid-divider-vertical();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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,
|
||||
.uk-grid-divider.uk-grid-column-small { margin-left: -($grid-small-gutter-horizontal * 2); }
|
||||
.uk-grid-divider.uk-grid-small > *,
|
||||
.uk-grid-divider.uk-grid-column-small > * { padding-left: ($grid-small-gutter-horizontal * 2); }
|
||||
|
||||
.uk-grid-divider.uk-grid-small > :not(.uk-first-column)::before,
|
||||
.uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { left: $grid-small-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
|
||||
.uk-grid-divider.uk-grid-row-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);
|
||||
}
|
||||
|
||||
.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-small-gutter-vertical); }
|
||||
.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { left: ($grid-small-gutter-horizontal * 2); }
|
||||
|
||||
/*
|
||||
* Medium
|
||||
*/
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-divider.uk-grid-medium,
|
||||
.uk-grid-divider.uk-grid-column-medium { margin-left: -($grid-medium-gutter-horizontal * 2); }
|
||||
.uk-grid-divider.uk-grid-medium > *,
|
||||
.uk-grid-divider.uk-grid-column-medium > * { padding-left: ($grid-medium-gutter-horizontal * 2); }
|
||||
|
||||
.uk-grid-divider.uk-grid-medium > :not(.uk-first-column)::before,
|
||||
.uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { left: $grid-medium-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
|
||||
.uk-grid-divider.uk-grid-row-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);
|
||||
}
|
||||
|
||||
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-medium-gutter-vertical); }
|
||||
.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { left: ($grid-medium-gutter-horizontal * 2); }
|
||||
|
||||
/*
|
||||
* Large
|
||||
*/
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-divider.uk-grid-large,
|
||||
.uk-grid-divider.uk-grid-column-large { margin-left: -($grid-large-gutter-horizontal * 2); }
|
||||
.uk-grid-divider.uk-grid-large > *,
|
||||
.uk-grid-divider.uk-grid-column-large > * { padding-left: ($grid-large-gutter-horizontal * 2); }
|
||||
|
||||
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
|
||||
.uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: $grid-large-gutter-horizontal; }
|
||||
|
||||
/* Vertical */
|
||||
.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
|
||||
.uk-grid-divider.uk-grid-row-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);
|
||||
}
|
||||
|
||||
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-large-gutter-vertical); }
|
||||
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: ($grid-large-gutter-horizontal * 2); }
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
/* Horizontal */
|
||||
.uk-grid-divider.uk-grid-large,
|
||||
.uk-grid-divider.uk-grid-column-large { margin-left: -($grid-large-gutter-horizontal-l * 2); }
|
||||
.uk-grid-divider.uk-grid-large > *,
|
||||
.uk-grid-divider.uk-grid-column-large > * { padding-left: ($grid-large-gutter-horizontal-l * 2); }
|
||||
|
||||
.uk-grid-divider.uk-grid-large > :not(.uk-first-column)::before,
|
||||
.uk-grid-divider.uk-grid-column-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,
|
||||
.uk-grid-divider.uk-grid-row-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);
|
||||
}
|
||||
|
||||
.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: (-$grid-large-gutter-vertical-l); }
|
||||
.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { 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-divider-horizontal(){}
|
||||
// @mixin hook-grid-divider-vertical(){}
|
||||
// @mixin hook-grid-misc(){}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
$inverse-grid-divider-border: $inverse-global-border !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-grid-divider-horizontal(){}
|
||||
// @mixin hook-inverse-grid-divider-vertical(){}
|
||||
321
client/uikit/src/scss/components/heading.scss
Normal file
321
client/uikit/src/scss/components/heading.scss
Normal file
@@ -0,0 +1,321 @@
|
||||
// Name: Heading
|
||||
// Description: Styles for headings
|
||||
//
|
||||
// Component: `uk-heading-primary`
|
||||
// `uk-heading-hero`
|
||||
// `uk-heading-divider`
|
||||
// `uk-heading-bullet`
|
||||
// `uk-heading-line`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$heading-small-font-size: $heading-small-font-size-m * 0.8 !default; // 38px 0.73
|
||||
$heading-medium-font-size: $heading-medium-font-size-m * 0.825 !default; // 40px 0.714
|
||||
$heading-large-font-size: $heading-large-font-size-m * 0.85 !default; // 50px 0.78
|
||||
$heading-xlarge-font-size: $heading-large-font-size-m !default; // 4rem / 64px
|
||||
$heading-2xlarge-font-size: $heading-xlarge-font-size-m !default; // 6rem / 96px
|
||||
|
||||
$heading-small-font-size-m: $heading-medium-font-size-l * 0.8125 !default; // 3.25rem / 52px
|
||||
$heading-medium-font-size-m: $heading-medium-font-size-l * 0.875 !default; // 3.5rem / 56px
|
||||
$heading-large-font-size-m: $heading-medium-font-size-l !default; // 4rem / 64px
|
||||
$heading-xlarge-font-size-m: $heading-large-font-size-l !default; // 6rem / 96px
|
||||
$heading-2xlarge-font-size-m: $heading-xlarge-font-size-l !default; // 8rem / 128px
|
||||
|
||||
$heading-medium-font-size-l: 4rem !default; // 64px
|
||||
$heading-large-font-size-l: 6rem !default; // 96px
|
||||
$heading-xlarge-font-size-l: 8rem !default; // 128px
|
||||
$heading-2xlarge-font-size-l: 11rem !default; // 176px
|
||||
|
||||
$heading-small-line-height: 1.2 !default;
|
||||
$heading-medium-line-height: 1.1 !default;
|
||||
$heading-large-line-height: 1.1 !default;
|
||||
$heading-xlarge-line-height: 1 !default;
|
||||
$heading-2xlarge-line-height: 1 !default;
|
||||
|
||||
$heading-divider-padding-bottom: unquote('calc(5px + 0.1em)') !default;
|
||||
$heading-divider-border-width: unquote('calc(0.2px + 0.05em)') !default;
|
||||
$heading-divider-border: $global-border !default;
|
||||
|
||||
$heading-bullet-top: unquote('calc(-0.1 * 1em)') !default;
|
||||
$heading-bullet-height: unquote('calc(4px + 0.7em)') !default;
|
||||
$heading-bullet-margin-right: unquote('calc(5px + 0.2em)') !default;
|
||||
$heading-bullet-border-width: unquote('calc(5px + 0.1em)') !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: unquote('calc(0.2px + 0.05em)') !default;
|
||||
$heading-line-border: $global-border !default;
|
||||
$heading-line-margin-horizontal: unquote('calc(5px + 0.3em)') !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Heading
|
||||
========================================================================== */
|
||||
|
||||
.uk-heading-small {
|
||||
font-size: $heading-small-font-size;
|
||||
line-height: $heading-small-line-height;
|
||||
@if(mixin-exists(hook-heading-small)) {@include hook-heading-small();}
|
||||
}
|
||||
|
||||
.uk-heading-medium {
|
||||
font-size: $heading-medium-font-size;
|
||||
line-height: $heading-medium-line-height;
|
||||
@if(mixin-exists(hook-heading-medium)) {@include hook-heading-medium();}
|
||||
}
|
||||
|
||||
.uk-heading-large {
|
||||
font-size: $heading-large-font-size;
|
||||
line-height: $heading-large-line-height;
|
||||
@if(mixin-exists(hook-heading-large)) {@include hook-heading-large();}
|
||||
}
|
||||
|
||||
.uk-heading-xlarge {
|
||||
font-size: $heading-xlarge-font-size;
|
||||
line-height: $heading-xlarge-line-height;
|
||||
@if(mixin-exists(hook-heading-xlarge)) {@include hook-heading-xlarge();}
|
||||
}
|
||||
|
||||
.uk-heading-2xlarge {
|
||||
font-size: $heading-2xlarge-font-size;
|
||||
line-height: $heading-2xlarge-line-height;
|
||||
@if(mixin-exists(hook-heading-2xlarge)) {@include hook-heading-2xlarge();}
|
||||
}
|
||||
|
||||
/* Tablet Landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-heading-small { font-size: $heading-small-font-size-m; }
|
||||
.uk-heading-medium { font-size: $heading-medium-font-size-m; }
|
||||
.uk-heading-large { font-size: $heading-large-font-size-m; }
|
||||
.uk-heading-xlarge { font-size: $heading-xlarge-font-size-m; }
|
||||
.uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-m; }
|
||||
|
||||
}
|
||||
|
||||
/* Laptop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
.uk-heading-medium { font-size: $heading-medium-font-size-l; }
|
||||
.uk-heading-large { font-size: $heading-large-font-size-l; }
|
||||
.uk-heading-xlarge { font-size: $heading-xlarge-font-size-l; }
|
||||
.uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-l; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Primary
|
||||
Deprecated: Use `uk-heading-medium` instead
|
||||
========================================================================== */
|
||||
|
||||
$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;
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.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) {
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.uk-heading-primary { font-size: $heading-primary-font-size-m; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.uk-heading-primary {
|
||||
font-size: $heading-primary-font-size-l;
|
||||
line-height: $heading-primary-line-height-l;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Hero
|
||||
Deprecated: Use `uk-heading-xlarge` instead
|
||||
========================================================================== */
|
||||
|
||||
$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;
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.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) {
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.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) {
|
||||
|
||||
@if ($deprecated == true) {
|
||||
.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-small(){}
|
||||
// @mixin hook-heading-medium(){}
|
||||
// @mixin hook-heading-large(){}
|
||||
// @mixin hook-heading-xlarge(){}
|
||||
// @mixin hook-heading-2xlarge(){}
|
||||
// @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-small(){}
|
||||
// @mixin hook-inverse-heading-medium(){}
|
||||
// @mixin hook-inverse-heading-large(){}
|
||||
// @mixin hook-inverse-heading-xlarge(){}
|
||||
// @mixin hook-inverse-heading-2xlarge(){}
|
||||
// @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(){}
|
||||
54
client/uikit/src/scss/components/height.scss
Normal file
54
client/uikit/src/scss/components/height.scss
Normal file
@@ -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(){}
|
||||
216
client/uikit/src/scss/components/icon.scss
Normal file
216
client/uikit/src/scss/components/icon.scss
Normal file
@@ -0,0 +1,216 @@
|
||||
// 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
|
||||
*/
|
||||
|
||||
.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
|
||||
.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
|
||||
|
||||
/*
|
||||
* 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 {
|
||||
color: $icon-link-hover-color;
|
||||
@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 */
|
||||
.uk-icon-button:hover {
|
||||
background-color: $icon-button-hover-background;
|
||||
color: $icon-button-hover-color;
|
||||
@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: fadein($inverse-icon-button-background, 5%) !default;
|
||||
$inverse-icon-button-hover-color: $inverse-global-color !default;
|
||||
$inverse-icon-button-active-background: fadein($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(){}
|
||||
146
client/uikit/src/scss/components/iconnav.scss
Normal file
146
client/uikit/src/scss/components/iconnav.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// 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();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Space is allocated based on content dimensions, but shrinks: 0 1 auto
|
||||
* 1. Gutter
|
||||
*/
|
||||
|
||||
.uk-iconnav > * {
|
||||
/* 1 */
|
||||
padding-left: $iconnav-margin-horizontal;
|
||||
}
|
||||
|
||||
|
||||
/* Items
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Items must target `a` elements to exclude other elements (e.g. dropdowns)
|
||||
* 1. Center content vertically if there is still some text
|
||||
* 2. Imitate white space gap when using flexbox
|
||||
* 3. Force text not to affect item height
|
||||
* 4. Style
|
||||
* 5. Required for `a` if there is still some text
|
||||
*/
|
||||
|
||||
.uk-iconnav > * > a {
|
||||
/* 1 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 2 */
|
||||
column-gap: 0.25em;
|
||||
/* 3 */
|
||||
line-height: 0;
|
||||
/* 4 */
|
||||
color: $iconnav-item-color;
|
||||
/* 5 */
|
||||
text-decoration: none;
|
||||
@if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-iconnav > * > a:hover {
|
||||
color: $iconnav-item-hover-color;
|
||||
@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(){}
|
||||
46
client/uikit/src/scss/components/inverse.scss
Normal file
46
client/uikit/src/scss/components/inverse.scss
Normal file
@@ -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(){}
|
||||
102
client/uikit/src/scss/components/label.scss
Normal file
102
client/uikit/src/scss/components/label.scss
Normal file
@@ -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(){}
|
||||
70
client/uikit/src/scss/components/leader.scss
Normal file
70
client/uikit/src/scss/components/leader.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
// Name: Leader
|
||||
// Description: Component to create dot leaders
|
||||
//
|
||||
// Component: `uk-leader`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$leader-fill-content: unquote('.') !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
|
||||
*/
|
||||
|
||||
.uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
|
||||
:root { --uk-leader-fill-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(){}
|
||||
249
client/uikit/src/scss/components/lightbox.scss
Normal file
249
client/uikit/src/scss/components/lightbox.scss
Normal file
@@ -0,0 +1,249 @@
|
||||
// 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-focus-outline: rgba(255,255,255,0.7) !default;
|
||||
|
||||
$lightbox-item-color: rgba(255,255,255,0.7) !default;
|
||||
$lightbox-item-max-width: 100vw !default;
|
||||
$lightbox-item-max-height: 100vh !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
|
||||
* 7. Prevent cancellation of pointer events while dragging
|
||||
*/
|
||||
|
||||
.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;
|
||||
/* 7 */
|
||||
touch-action: pinch-zoom;
|
||||
@if(mixin-exists(hook-lightbox)) {@include hook-lightbox();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Open
|
||||
* 1. Center child
|
||||
* 2. Fade-in
|
||||
*/
|
||||
|
||||
.uk-lightbox.uk-open {
|
||||
display: block;
|
||||
/* 2 */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Focus
|
||||
*/
|
||||
|
||||
.uk-lightbox :focus { outline-color: $lightbox-focus-outline; }
|
||||
.uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; }
|
||||
|
||||
|
||||
/* 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: $lightbox-item-max-width;
|
||||
max-height: $lightbox-item-max-height;
|
||||
}
|
||||
|
||||
.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();}
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-lightbox-button:active {
|
||||
@if(mixin-exists(hook-lightbox-button-active)) {@include hook-lightbox-button-active();}
|
||||
}
|
||||
|
||||
|
||||
/* Caption
|
||||
========================================================================== */
|
||||
|
||||
.uk-lightbox-caption:empty { display: none; }
|
||||
|
||||
|
||||
/* 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-button-active(){}
|
||||
// @mixin hook-lightbox-misc(){}
|
||||
138
client/uikit/src/scss/components/link.scss
Normal file
138
client/uikit/src/scss/components/link.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
// Name: Link
|
||||
// Description: Styles for links
|
||||
//
|
||||
// Component: `uk-link-muted`
|
||||
// `uk-link-text`
|
||||
// `uk-link-heading`
|
||||
// `uk-link-reset`
|
||||
//
|
||||
// Sub-objects: `uk-link-toggle`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// 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,
|
||||
.uk-link-toggle .uk-link-muted {
|
||||
color: $link-muted-color;
|
||||
@if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
|
||||
}
|
||||
|
||||
a.uk-link-muted:hover,
|
||||
.uk-link-muted a:hover,
|
||||
.uk-link-toggle:hover .uk-link-muted {
|
||||
color: $link-muted-hover-color;
|
||||
@if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
|
||||
}
|
||||
|
||||
|
||||
/* Text
|
||||
========================================================================== */
|
||||
|
||||
a.uk-link-text,
|
||||
.uk-link-text a,
|
||||
.uk-link-toggle .uk-link-text {
|
||||
color: inherit;
|
||||
@if(mixin-exists(hook-link-text)) {@include hook-link-text();}
|
||||
}
|
||||
|
||||
a.uk-link-text:hover,
|
||||
.uk-link-text a:hover,
|
||||
.uk-link-toggle:hover .uk-link-text {
|
||||
color: $link-text-hover-color;
|
||||
@if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
|
||||
}
|
||||
|
||||
|
||||
/* Heading
|
||||
========================================================================== */
|
||||
|
||||
a.uk-link-heading,
|
||||
.uk-link-heading a,
|
||||
.uk-link-toggle .uk-link-heading {
|
||||
color: inherit;
|
||||
@if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
|
||||
}
|
||||
|
||||
a.uk-link-heading:hover,
|
||||
.uk-link-heading a:hover,
|
||||
.uk-link-toggle:hover .uk-link-heading {
|
||||
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,
|
||||
.uk-link-reset a {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
@if(mixin-exists(hook-link-reset)) {@include hook-link-reset();}
|
||||
}
|
||||
|
||||
|
||||
/* Toggle
|
||||
========================================================================== */
|
||||
|
||||
.uk-link-toggle {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
|
||||
// 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(){}
|
||||
235
client/uikit/src/scss/components/list.scss
Normal file
235
client/uikit/src/scss/components/list.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
// Name: List
|
||||
// Description: Styles for lists
|
||||
//
|
||||
// Component: `uk-list`
|
||||
//
|
||||
// Modifiers: `uk-list-disc`
|
||||
// `uk-list-circle`
|
||||
// `uk-list-square`
|
||||
// `uk-list-decimal`
|
||||
// `uk-list-hyphen`
|
||||
// `uk-list-muted`
|
||||
// `uk-list-emphasis`
|
||||
// `uk-list-primary`
|
||||
// `uk-list-secondary`
|
||||
// `uk-list-bullet`
|
||||
// `uk-list-divider`
|
||||
// `uk-list-striped`
|
||||
// `uk-list-large`
|
||||
// `uk-list-collapse`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$list-margin-top: $global-small-margin !default;
|
||||
|
||||
$list-padding-left: 30px !default;
|
||||
|
||||
$list-marker-height: ($global-line-height * 1em) !default;
|
||||
|
||||
$list-muted-color: $global-muted-color !default;
|
||||
$list-emphasis-color: $global-emphasis-color !default;
|
||||
$list-primary-color: $global-primary-background !default;
|
||||
$list-secondary-color: $global-secondary-background !default;
|
||||
|
||||
$list-bullet-icon-color: $global-color !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-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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-list > * > :last-child { margin-bottom: 0; }
|
||||
|
||||
/*
|
||||
* Style
|
||||
*/
|
||||
|
||||
.uk-list > :nth-child(n+2),
|
||||
.uk-list > * > ul { margin-top: $list-margin-top; }
|
||||
|
||||
|
||||
/* Marker modifiers
|
||||
* Moving `::marker` inside `::before` to style it differently
|
||||
* To style the `::marker` is currently only supported in Firefox and Safari
|
||||
========================================================================== */
|
||||
|
||||
.uk-list-disc > *,
|
||||
.uk-list-circle > *,
|
||||
.uk-list-square > *,
|
||||
.uk-list-decimal > *,
|
||||
.uk-list-hyphen > * { padding-left: $list-padding-left; }
|
||||
|
||||
/*
|
||||
* Type modifiers
|
||||
*/
|
||||
|
||||
.uk-list-decimal { counter-reset: decimal; }
|
||||
.uk-list-decimal > * { counter-increment: decimal; }
|
||||
|
||||
[class*='uk-list'] > ::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: (-$list-padding-left);
|
||||
width: $list-padding-left;
|
||||
height: $list-marker-height;
|
||||
margin-bottom: (-$list-marker-height);
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.uk-list-disc > ::before { list-style-type: disc; }
|
||||
.uk-list-circle > ::before { list-style-type: circle; }
|
||||
.uk-list-square > ::before { list-style-type: square; }
|
||||
.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
|
||||
.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }
|
||||
|
||||
/*
|
||||
* Color modifiers
|
||||
*/
|
||||
|
||||
.uk-list-muted > ::before { color: $list-muted-color !important; }
|
||||
.uk-list-emphasis > ::before { color: $list-emphasis-color !important; }
|
||||
.uk-list-primary > ::before { color: $list-primary-color !important; }
|
||||
.uk-list-secondary > ::before { color: $list-secondary-color !important; }
|
||||
|
||||
|
||||
/* Image bullet modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-list-bullet > * { padding-left: $list-padding-left; }
|
||||
|
||||
.uk-list-bullet > ::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: (-$list-padding-left);
|
||||
width: $list-padding-left;
|
||||
height: $list-marker-height;
|
||||
margin-bottom: (-$list-marker-height);
|
||||
@include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Divider
|
||||
*/
|
||||
|
||||
.uk-list-divider > :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 > * {
|
||||
padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
|
||||
@if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
|
||||
}
|
||||
|
||||
.uk-list-striped > :nth-of-type(odd) { background: $list-striped-background; }
|
||||
|
||||
.uk-list-striped > :nth-child(n+2) { margin-top: 0; }
|
||||
|
||||
|
||||
/* Size modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-list-large > :nth-child(n+2),
|
||||
.uk-list-large > * > ul { margin-top: $list-large-margin-top; }
|
||||
|
||||
.uk-list-collapse > :nth-child(n+2),
|
||||
.uk-list-collapse > * > ul { margin-top: 0; }
|
||||
|
||||
/*
|
||||
* Divider
|
||||
*/
|
||||
|
||||
.uk-list-large.uk-list-divider > :nth-child(n+2) {
|
||||
margin-top: $list-large-divider-margin-top;
|
||||
padding-top: $list-large-divider-margin-top;
|
||||
}
|
||||
|
||||
.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Striped
|
||||
*/
|
||||
|
||||
.uk-list-large.uk-list-striped > * { padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; }
|
||||
|
||||
.uk-list-collapse.uk-list-striped > * {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.uk-list-large.uk-list-striped > :nth-child(n+2),
|
||||
.uk-list-collapse.uk-list-striped > :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-misc(){}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
$inverse-list-muted-color: $inverse-global-muted-color !default;
|
||||
$inverse-list-emphasis-color: $inverse-global-emphasis-color !default;
|
||||
$inverse-list-primary-color: $inverse-global-primary-background !default;
|
||||
$inverse-list-secondary-color: $inverse-global-primary-background !default;
|
||||
|
||||
$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(){}
|
||||
250
client/uikit/src/scss/components/margin.scss
Normal file
250
client/uikit/src/scss/components/margin.scss
Normal file
@@ -0,0 +1,250 @@
|
||||
// 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; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-margin-auto\@s {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.uk-margin-auto-left\@s { margin-left: auto !important; }
|
||||
.uk-margin-auto-right\@s { margin-right: auto !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-margin-auto\@m {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.uk-margin-auto-left\@m { margin-left: auto !important; }
|
||||
.uk-margin-auto-right\@m { margin-right: auto !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
.uk-margin-auto\@l {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.uk-margin-auto-left\@l { margin-left: auto !important; }
|
||||
.uk-margin-auto-right\@l { margin-right: auto !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Large screen and bigger */
|
||||
@media (min-width: $breakpoint-xlarge) {
|
||||
|
||||
.uk-margin-auto\@xl {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.uk-margin-auto-left\@xl { margin-left: auto !important; }
|
||||
.uk-margin-auto-right\@xl { margin-right: auto !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 + *,
|
||||
.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
|
||||
.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
|
||||
|
||||
/* Phone landscape and bigger */
|
||||
@media (min-width: $breakpoint-small) {
|
||||
|
||||
.uk-margin-remove-left\@s { margin-left: 0 !important; }
|
||||
.uk-margin-remove-right\@s { margin-right: 0 !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-margin-remove-left\@m { margin-left: 0 !important; }
|
||||
.uk-margin-remove-right\@m { margin-right: 0 !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
.uk-margin-remove-left\@l { margin-left: 0 !important; }
|
||||
.uk-margin-remove-right\@l { margin-right: 0 !important; }
|
||||
|
||||
}
|
||||
|
||||
/* Large screen and bigger */
|
||||
@media (min-width: $breakpoint-xlarge) {
|
||||
|
||||
.uk-margin-remove-left\@xl { margin-left: 0 !important; }
|
||||
.uk-margin-remove-right\@xl { margin-right: 0 !important; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}
|
||||
|
||||
// @mixin hook-margin-misc(){}
|
||||
61
client/uikit/src/scss/components/marker.scss
Normal file
61
client/uikit/src/scss/components/marker.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
// 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 */
|
||||
.uk-marker:hover {
|
||||
color: $marker-hover-color;
|
||||
@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(){}
|
||||
32
client/uikit/src/scss/components/mixin.scss
Normal file
32
client/uikit/src/scss/components/mixin.scss
Normal file
@@ -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));
|
||||
}
|
||||
353
client/uikit/src/scss/components/modal.scss
Normal file
353
client/uikit/src/scss/components/modal.scss
Normal file
@@ -0,0 +1,353 @@
|
||||
// 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 * 0.5) !default;
|
||||
$modal-header-background: $global-muted-background !default;
|
||||
|
||||
$modal-footer-padding-horizontal: $global-gutter !default;
|
||||
$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !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 {
|
||||
display: flow-root;
|
||||
padding: $modal-body-padding-vertical $modal-body-padding-horizontal;
|
||||
@if(mixin-exists(hook-modal-body)) {@include hook-modal-body();}
|
||||
}
|
||||
|
||||
.uk-modal-header {
|
||||
display: flow-root;
|
||||
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 {
|
||||
display: flow-root;
|
||||
padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal;
|
||||
background: $modal-footer-background;
|
||||
@if(mixin-exists(hook-modal-footer)) {@include hook-modal-footer();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
396
client/uikit/src/scss/components/nav.scss
Normal file
396
client/uikit/src/scss/components/nav.scss
Normal file
@@ -0,0 +1,396 @@
|
||||
// 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`,
|
||||
// `uk-nav-divider`
|
||||
//
|
||||
// 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-default-sublist-item-active-color: $global-emphasis-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;
|
||||
$nav-primary-sublist-item-active-color: $global-emphasis-color !default;
|
||||
|
||||
$nav-dividers-margin-top: 0 !default;
|
||||
$nav-dividers-border-width: $global-border-width !default;
|
||||
$nav-dividers-border: $global-border !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
|
||||
*/
|
||||
|
||||
.uk-nav,
|
||||
.uk-nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Center content vertically, e.g. an icon
|
||||
* 2. Imitate white space gap when using flexbox
|
||||
* 3. Reset link
|
||||
* 4. Space is allocated solely based on content dimensions: 0 0 auto
|
||||
*/
|
||||
|
||||
.uk-nav li > a {
|
||||
/* 1 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 2 */
|
||||
column-gap: 0.25em;
|
||||
/* 3*/
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 4 */
|
||||
.uk-nav li > a > * { flex: 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;
|
||||
margin-left: auto;
|
||||
@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 >.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 */
|
||||
.uk-nav-default > li > a:hover {
|
||||
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 { color: $nav-default-sublist-item-hover-color; }
|
||||
|
||||
.uk-nav-default .uk-nav-sub li.uk-active > a { color: $nav-default-sublist-item-active-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 */
|
||||
.uk-nav-primary > li > a:hover {
|
||||
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 { color: $nav-primary-sublist-item-hover-color; }
|
||||
|
||||
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: $nav-primary-sublist-item-active-color; }
|
||||
|
||||
|
||||
/* Alignment modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Center header
|
||||
* 2. Center items
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
.uk-nav-center { text-align: center; }
|
||||
/* 2 */
|
||||
.uk-nav-center li > a { justify-content: 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 { margin-left: 0; }
|
||||
|
||||
|
||||
/* Style modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
||||
margin-top: $nav-dividers-margin-top;
|
||||
padding-top: $nav-dividers-margin-top;
|
||||
border-top: $nav-dividers-border-width solid $nav-dividers-border;
|
||||
@if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
|
||||
}
|
||||
|
||||
|
||||
// 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-dividers(){}
|
||||
// @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-default-sublist-item-active-color: $inverse-global-emphasis-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;
|
||||
$inverse-nav-primary-sublist-item-active-color: $inverse-global-emphasis-color !default;
|
||||
|
||||
$inverse-nav-dividers-border: $inverse-global-border !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(){}
|
||||
// @mixin hook-inverse-nav-dividers(){}
|
||||
547
client/uikit/src/scss/components/navbar.scss
Normal file
547
client/uikit/src/scss/components/navbar.scss
Normal file
@@ -0,0 +1,547 @@
|
||||
// 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-primary`
|
||||
// `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-dropdown-nav-sublist-item-active-color: $global-emphasis-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. Fix text wrapping if content is larger than 50% of the container.
|
||||
* 3. Needed for dropdowns because a new position context is created
|
||||
* `z-index` must be smaller than off-canvas
|
||||
* 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 */
|
||||
width: max-content;
|
||||
box-sizing: border-box;
|
||||
/* 3 */
|
||||
z-index: $global-z-index - 10;
|
||||
}
|
||||
|
||||
/* 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-'] {
|
||||
width: max-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 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. Imitate white space gap when using flexbox
|
||||
* 3. Dimensions
|
||||
* 4. Style
|
||||
* 5. 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 */
|
||||
column-gap: 0.25em;
|
||||
/* 3 */
|
||||
box-sizing: border-box;
|
||||
min-height: $navbar-nav-item-height;
|
||||
padding: 0 $navbar-nav-item-padding-horizontal;
|
||||
/* 4 */
|
||||
font-size: $navbar-nav-item-font-size;
|
||||
font-family: $navbar-nav-item-font-family;
|
||||
/* 5 */
|
||||
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 if dropdown is opened
|
||||
*/
|
||||
|
||||
.uk-navbar-nav > li:hover > a,
|
||||
.uk-navbar-nav > li > a[aria-expanded="true"] {
|
||||
color: $navbar-nav-item-hover-color;
|
||||
@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();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-navbar-item > :last-child { margin-bottom: 0; }
|
||||
|
||||
|
||||
/* 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[aria-expanded="true"] {
|
||||
color: $navbar-toggle-hover-color;
|
||||
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 */
|
||||
:hover > .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-primary {
|
||||
@if(mixin-exists(hook-navbar-primary)) {@include hook-navbar-primary();}
|
||||
}
|
||||
|
||||
.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 */
|
||||
.uk-navbar-dropdown-nav > li > a:hover {
|
||||
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 { color: $navbar-dropdown-nav-sublist-item-hover-color; }
|
||||
|
||||
.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: $navbar-dropdown-nav-sublist-item-active-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-primary(){}
|
||||
// @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(){}
|
||||
191
client/uikit/src/scss/components/notification.scss
Normal file
191
client/uikit/src/scss/components/notification.scss
Normal file
@@ -0,0 +1,191 @@
|
||||
// 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-top: 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 * -0.5);
|
||||
}
|
||||
|
||||
.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;
|
||||
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();}
|
||||
}
|
||||
|
||||
* + .uk-notification-message { margin-top: $notification-message-margin-top; }
|
||||
|
||||
|
||||
/* 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(){}
|
||||
306
client/uikit/src/scss/components/offcanvas.scss
Normal file
306
client/uikit/src/scss/components/offcanvas.scss
Normal file
@@ -0,0 +1,306 @@
|
||||
// Name: Off-canvas
|
||||
// Description: Component to create an off-canvas sidebar
|
||||
//
|
||||
// Component: `uk-offcanvas`
|
||||
//
|
||||
// Sub-objects: `uk-offcanvas-bar`
|
||||
// `uk-offcanvas-container`
|
||||
// `uk-offcanvas-page`
|
||||
//
|
||||
// Adopted: `uk-offcanvas-close`
|
||||
//
|
||||
// Modifiers: `uk-offcanvas-flip`
|
||||
// `uk-offcanvas-bar-animation`
|
||||
// `uk-offcanvas-reveal`
|
||||
// `uk-offcanvas-overlay`
|
||||
// `uk-offcanvas-container-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
|
||||
*/
|
||||
|
||||
.uk-offcanvas-bar {
|
||||
/* 1 */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: (-$offcanvas-bar-width);
|
||||
/* 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;
|
||||
@if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-offcanvas-bar {
|
||||
left: (-$offcanvas-bar-width-m);
|
||||
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: (-$offcanvas-bar-width);
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
.uk-offcanvas-flip .uk-offcanvas-bar { right: (-$offcanvas-bar-width-m); }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Open
|
||||
*/
|
||||
|
||||
.uk-open > .uk-offcanvas-bar { left: 0; }
|
||||
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide Animation (Used in slide and push mode)
|
||||
*/
|
||||
|
||||
.uk-offcanvas-bar-animation { transition: left 0.3s ease-out; }
|
||||
.uk-offcanvas-flip .uk-offcanvas-bar-animation { transition-property: right; }
|
||||
|
||||
/*
|
||||
* Reveal Animation
|
||||
* 1. Set position
|
||||
* 2. Clip the bar
|
||||
* 3. Animation
|
||||
* 4. Reset position
|
||||
*/
|
||||
|
||||
.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 */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
|
||||
/* 4 */
|
||||
left: auto;
|
||||
right: 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; }
|
||||
|
||||
|
||||
/* Prevent scrolling
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 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; }
|
||||
|
||||
|
||||
/* Container
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 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
|
||||
* 1. Provide a fixed width and prevent shrinking
|
||||
*/
|
||||
|
||||
.uk-offcanvas-container {
|
||||
position: relative;
|
||||
left: 0;
|
||||
transition: left 0.3s ease-out;
|
||||
/* 1 */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Activate slide-out animation
|
||||
*/
|
||||
|
||||
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width; }
|
||||
|
||||
.uk-offcanvas-flip.uk-offcanvas-container-animation { left: (-$offcanvas-bar-width); }
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
||||
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation { left: $offcanvas-bar-width-m; }
|
||||
|
||||
.uk-offcanvas-flip.uk-offcanvas-container-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(){}
|
||||
85
client/uikit/src/scss/components/overlay.scss
Normal file
85
client/uikit/src/scss/components/overlay.scss
Normal file
@@ -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(){}
|
||||
81
client/uikit/src/scss/components/padding.scss
Normal file
81
client/uikit/src/scss/components/padding.scss
Normal file
@@ -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-medium-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(){}
|
||||
130
client/uikit/src/scss/components/pagination.scss
Normal file
130
client/uikit/src/scss/components/pagination.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
// 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: 0 !default;
|
||||
|
||||
$pagination-item-padding-vertical: 5px !default;
|
||||
$pagination-item-padding-horizontal: 10px !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 */
|
||||
padding: $pagination-item-padding-vertical $pagination-item-padding-horizontal;
|
||||
color: $pagination-item-color;
|
||||
@if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-pagination > * > :hover {
|
||||
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(){}
|
||||
45
client/uikit/src/scss/components/placeholder.scss
Normal file
45
client/uikit/src/scss/components/placeholder.scss
Normal file
@@ -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(){}
|
||||
228
client/uikit/src/scss/components/position.scss
Normal file
228
client/uikit/src/scss/components/position.scss
Normal file
@@ -0,0 +1,228 @@
|
||||
// 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
|
||||
========================================================================== */
|
||||
|
||||
:root { --uk-position-margin-offset: 0px; }
|
||||
|
||||
|
||||
/* Directions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Prevent content overflow.
|
||||
*/
|
||||
|
||||
[class*='uk-position-top'],
|
||||
[class*='uk-position-bottom'],
|
||||
[class*='uk-position-left'],
|
||||
[class*='uk-position-right'],
|
||||
[class*='uk-position-center'] {
|
||||
position: absolute !important;
|
||||
/* 1 */
|
||||
max-width: unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Edges
|
||||
* Don't use `width: 100%` because it's 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.
|
||||
* Using `max-content` requires `max-width` of 100% which is set generally.
|
||||
*/
|
||||
|
||||
.uk-position-center {
|
||||
top: unquote('calc(50% - var(--uk-position-margin-offset))');
|
||||
left: unquote('calc(50% - var(--uk-position-margin-offset))');
|
||||
--uk-position-translate-x: -50%;
|
||||
--uk-position-translate-y: -50%;
|
||||
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
|
||||
/* 1 */
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
[class*='uk-position-center-left'],
|
||||
[class*='uk-position-center-right'] {
|
||||
top: unquote('calc(50% - var(--uk-position-margin-offset))');
|
||||
--uk-position-translate-y: -50%;
|
||||
transform: translate(0, var(--uk-position-translate-y));
|
||||
}
|
||||
|
||||
.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: unquote('calc(50% - var(--uk-position-margin-offset))');
|
||||
--uk-position-translate-x: -50%;
|
||||
transform: translate(var(--uk-position-translate-x), 0);
|
||||
/* 1 */
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* Margin
|
||||
========================================================================== */
|
||||
|
||||
.uk-position-small {
|
||||
margin: $position-small-margin;
|
||||
--uk-position-margin-offset: #{$position-small-margin};
|
||||
}
|
||||
|
||||
.uk-position-medium {
|
||||
margin: $position-medium-margin;
|
||||
--uk-position-margin-offset: #{$position-medium-margin};
|
||||
}
|
||||
|
||||
.uk-position-large {
|
||||
margin: $position-large-margin;
|
||||
--uk-position-margin-offset: #{$position-large-margin};
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
||||
.uk-position-large {
|
||||
margin: $position-large-margin-l;
|
||||
--uk-position-margin-offset: #{$position-large-margin-l};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Schemes
|
||||
========================================================================== */
|
||||
|
||||
.uk-position-relative { position: relative !important; }
|
||||
.uk-position-absolute { position: absolute !important; }
|
||||
.uk-position-fixed { position: fixed !important; }
|
||||
.uk-position-sticky { position: sticky !important; }
|
||||
|
||||
|
||||
/* Layer
|
||||
========================================================================== */
|
||||
|
||||
.uk-position-z-index { z-index: 1; }
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-position-misc)) {@include hook-position-misc();}
|
||||
|
||||
// @mixin hook-position-misc(){}
|
||||
61
client/uikit/src/scss/components/print.scss
Normal file
61
client/uikit/src/scss/components/print.scss
Normal file
@@ -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(){}
|
||||
105
client/uikit/src/scss/components/progress.scss
Normal file
105
client/uikit/src/scss/components/progress.scss
Normal file
@@ -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(){}
|
||||
338
client/uikit/src/scss/components/search.scss
Normal file
338
client/uikit/src/scss/components/search.scss
Normal file
@@ -0,0 +1,338 @@
|
||||
// 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: 240px !default;
|
||||
$search-default-height: $global-control-height !default;
|
||||
$search-default-padding-horizontal: 10px !default;
|
||||
$search-default-background: $global-muted-background !default;
|
||||
$search-default-focus-background: darken($search-default-background, 5%) !default;
|
||||
|
||||
$search-default-icon-width: $global-control-height !default;
|
||||
$search-default-icon-padding: 0 !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-navbar-icon-padding: 0 !default;
|
||||
|
||||
$search-large-width: 500px !default;
|
||||
$search-large-height: 80px !default;
|
||||
$search-large-background: transparent !default;
|
||||
$search-large-font-size: $global-2xlarge-font-size !default;
|
||||
|
||||
$search-large-icon-width: 80px !default;
|
||||
$search-large-icon-padding: 0 !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`)
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 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 + $search-default-icon-padding); }
|
||||
.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
|
||||
|
||||
|
||||
/* 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();}
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-search-navbar .uk-search-input:focus {
|
||||
@if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 + $search-navbar-icon-padding); }
|
||||
.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
|
||||
|
||||
|
||||
/* 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();}
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-search-large .uk-search-input:focus {
|
||||
@if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 + $search-large-icon-padding); }
|
||||
.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
|
||||
|
||||
|
||||
/* Toggle
|
||||
========================================================================== */
|
||||
|
||||
.uk-search-toggle {
|
||||
color: $search-toggle-color;
|
||||
@if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-search-toggle:hover {
|
||||
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-navbar-input-focus(){}
|
||||
// @mixin hook-search-large-input(){}
|
||||
// @mixin hook-search-large-input-focus(){}
|
||||
|
||||
// @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: fadein($inverse-search-default-background, 5%) !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-navbar-input-focus(){}
|
||||
// @mixin hook-inverse-search-large-input(){}
|
||||
// @mixin hook-inverse-search-large-input-focus(){}
|
||||
// @mixin hook-inverse-search-toggle(){}
|
||||
// @mixin hook-inverse-search-toggle-hover(){}
|
||||
212
client/uikit/src/scss/components/section.scss
Normal file
212
client/uikit/src/scss/components/section.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
// 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 {
|
||||
display: flow-root;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
120
client/uikit/src/scss/components/slidenav.scss
Normal file
120
client/uikit/src/scss/components/slidenav.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
// 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 */
|
||||
.uk-slidenav:hover {
|
||||
color: $slidenav-hover-color;
|
||||
@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(){}
|
||||
116
client/uikit/src/scss/components/slider.scss
Normal file
116
client/uikit/src/scss/components/slider.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
// Name: Slider
|
||||
// Description: Component to create horizontal sliders
|
||||
//
|
||||
// Component: `uk-slider`
|
||||
//
|
||||
// Sub-objects: `uk-slider-container`
|
||||
// `uk-slider-items`
|
||||
//
|
||||
// States: `uk-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$slider-container-margin-top: -11px !default;
|
||||
$slider-container-margin-bottom: -39px !default;
|
||||
$slider-container-margin-left: -25px !default;
|
||||
$slider-container-margin-right: -25px !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Clip child elements
|
||||
*/
|
||||
|
||||
.uk-slider-container { overflow: hidden; }
|
||||
|
||||
/*
|
||||
* Widen container to prevent box-shadows from clipping, `large-box-shadow`
|
||||
*/
|
||||
|
||||
.uk-slider-container-offset {
|
||||
margin: $slider-container-margin-top $slider-container-margin-right $slider-container-margin-bottom $slider-container-margin-left;
|
||||
padding: ($slider-container-margin-top * -1) ($slider-container-margin-right * -1) ($slider-container-margin-bottom * -1) ($slider-container-margin-left * -1);
|
||||
}
|
||||
|
||||
/* 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)
|
||||
* `max-width` needed to keep image responsiveness and prevent content overflow
|
||||
* 3. Create position context
|
||||
* 4. Disable horizontal panning gestures in IE11 and Edge
|
||||
*/
|
||||
|
||||
.uk-slider-items > * {
|
||||
/* 1 */
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
/* 3 */
|
||||
position: relative;
|
||||
/* 4 */
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-slider-misc)) {@include hook-slider-misc();}
|
||||
|
||||
// @mixin hook-slider(){}
|
||||
// @mixin hook-slider-misc(){}
|
||||
93
client/uikit/src/scss/components/slideshow.scss
Normal file
93
client/uikit/src/scss/components/slideshow.scss
Normal file
@@ -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(){}
|
||||
90
client/uikit/src/scss/components/sortable.scss
Normal file
90
client/uikit/src/scss/components/sortable.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
// 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();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-sortable > :last-child { margin-bottom: 0; }
|
||||
|
||||
|
||||
/* Drag
|
||||
========================================================================== */
|
||||
|
||||
.uk-sortable-drag {
|
||||
position: fixed !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;
|
||||
pointer-events: none;
|
||||
@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(){}
|
||||
74
client/uikit/src/scss/components/spinner.scss
Normal file
74
client/uikit/src/scss/components/spinner.scss
Normal file
@@ -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) * 0.5)) !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 * 0.25);
|
||||
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(){}
|
||||
53
client/uikit/src/scss/components/sticky.scss
Normal file
53
client/uikit/src/scss/components/sticky.scss
Normal file
@@ -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. Force new layer to resolve frame rate issues on devices with lower frame rates
|
||||
*/
|
||||
|
||||
.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(){}
|
||||
246
client/uikit/src/scss/components/subnav.scss
Normal file
246
client/uikit/src/scss/components/subnav.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
// 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. Center items vertically if they have a different height
|
||||
* 3. Gutter
|
||||
* 4. Reset list
|
||||
*/
|
||||
|
||||
.uk-subnav {
|
||||
display: flex;
|
||||
/* 1 */
|
||||
flex-wrap: wrap;
|
||||
/* 2 */
|
||||
align-items: center;
|
||||
/* 3 */
|
||||
margin-left: (-$subnav-margin-horizontal);
|
||||
/* 4 */
|
||||
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. Center content vertically, e.g. an icon
|
||||
* 2. Imitate white space gap when using flexbox
|
||||
* 3. Style
|
||||
*/
|
||||
|
||||
.uk-subnav > * > :first-child {
|
||||
/* 1 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 2 */
|
||||
column-gap: 0.25em;
|
||||
/* 3 */
|
||||
color: $subnav-item-color;
|
||||
@if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-subnav > * > a:hover {
|
||||
color: $subnav-item-hover-color;
|
||||
text-decoration: $subnav-item-hover-text-decoration;
|
||||
@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
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Set gutter
|
||||
*/
|
||||
|
||||
.uk-subnav-divider { margin-left: -(($subnav-divider-margin-horizontal * 2) + $subnav-divider-border-width); }
|
||||
|
||||
/*
|
||||
* Align items and divider vertically
|
||||
*/
|
||||
|
||||
.uk-subnav-divider > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Divider
|
||||
* 1. `nth-child` makes it also work without JS if it's only one row
|
||||
*/
|
||||
|
||||
.uk-subnav-divider > ::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 transparent;
|
||||
}
|
||||
|
||||
/* 1 */
|
||||
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
|
||||
border-left-color: $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 */
|
||||
.uk-subnav-pill > * > a:hover {
|
||||
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(){}
|
||||
36
client/uikit/src/scss/components/svg.scss
Normal file
36
client/uikit/src/scss/components/svg.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
// 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
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
.uk-svg,
|
||||
/* 2 */
|
||||
.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
|
||||
.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
|
||||
|
||||
/*
|
||||
* 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(){}
|
||||
47
client/uikit/src/scss/components/switcher.scss
Normal file
47
client/uikit/src/scss/components/switcher.scss
Normal file
@@ -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(){}
|
||||
196
client/uikit/src/scss/components/tab.scss
Normal file
196
client/uikit/src/scss/components/tab.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
// 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 content vertically, e.g. an icon
|
||||
* 2. Imitate white space gap when using flexbox
|
||||
* 3. Center content if a width is set
|
||||
* 4. Style
|
||||
*/
|
||||
|
||||
.uk-tab > * > a {
|
||||
/* 1 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 2 */
|
||||
column-gap: 0.25em;
|
||||
/* 3 */
|
||||
justify-content: center;
|
||||
/* 4 */
|
||||
padding: $tab-item-padding-vertical $tab-item-padding-horizontal;
|
||||
color: $tab-item-color;
|
||||
@if(mixin-exists(hook-tab-item)) {@include hook-tab-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-tab > * > a:hover {
|
||||
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 {
|
||||
justify-content: left;
|
||||
@if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();}
|
||||
}
|
||||
|
||||
.uk-tab-right > * > a {
|
||||
justify-content: 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(){}
|
||||
315
client/uikit/src/scss/components/table.scss
Normal file
315
client/uikit/src/scss/components/table.scss
Normal file
@@ -0,0 +1,315 @@
|
||||
// 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();}
|
||||
}
|
||||
|
||||
|
||||
/* 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();}
|
||||
}
|
||||
|
||||
|
||||
/* Active state
|
||||
========================================================================== */
|
||||
|
||||
.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();}
|
||||
}
|
||||
|
||||
/* 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 * 0.33333)) !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 * 0.33333)) !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(){}
|
||||
284
client/uikit/src/scss/components/text.scss
Normal file
284
client/uikit/src/scss/components/text.scss
Normal file
@@ -0,0 +1,284 @@
|
||||
// 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-muted-color: $global-muted-color !default;
|
||||
$text-emphasis-color: $global-emphasis-color !default;
|
||||
$text-primary-color: $global-primary-background !default;
|
||||
$text-secondary-color: $global-secondary-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();}
|
||||
}
|
||||
|
||||
.uk-text-default {
|
||||
font-size: $global-font-size;
|
||||
line-height: $global-line-height;
|
||||
}
|
||||
|
||||
|
||||
/* Weight modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-light { font-weight: 300; }
|
||||
.uk-text-normal { font-weight: 400; }
|
||||
.uk-text-bold { font-weight: 700; }
|
||||
|
||||
.uk-text-lighter { font-weight: lighter; }
|
||||
.uk-text-bolder { font-weight: bolder; }
|
||||
|
||||
|
||||
/* Style modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-italic { font-style: italic; }
|
||||
|
||||
|
||||
/* Transform modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-capitalize { text-transform: capitalize !important; }
|
||||
.uk-text-uppercase { text-transform: uppercase !important; }
|
||||
.uk-text-lowercase { text-transform: lowercase !important; }
|
||||
|
||||
|
||||
/* Decoration modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-decoration-none { text-decoration: none !important; }
|
||||
|
||||
|
||||
/* Color modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-muted { color: $text-muted-color !important; }
|
||||
.uk-text-emphasis { color: $text-emphasis-color !important; }
|
||||
.uk-text-primary { color: $text-primary-color !important; }
|
||||
.uk-text-secondary { color: $text-secondary-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;
|
||||
/* 2 */
|
||||
display: inline-block;
|
||||
/* 3 */
|
||||
color: $text-background-color !important;
|
||||
}
|
||||
|
||||
@supports (-webkit-background-clip: text) {
|
||||
|
||||
.uk-text-background {
|
||||
background-color: $text-background-color;
|
||||
color: transparent !important;
|
||||
@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-emphasis-color: $inverse-global-emphasis-color !default;
|
||||
$inverse-text-primary-color: $inverse-global-primary-background !default;
|
||||
$inverse-text-secondary-color: $inverse-global-primary-background !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-text-lead(){}
|
||||
// @mixin hook-inverse-text-meta(){}
|
||||
119
client/uikit/src/scss/components/thumbnav.scss
Normal file
119
client/uikit/src/scss/components/thumbnav.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
// 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();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Space is allocated based on content dimensions, but shrinks: 0 1 auto
|
||||
* 1. Gutter
|
||||
*/
|
||||
|
||||
.uk-thumbnav > * {
|
||||
/* 1 */
|
||||
padding-left: $thumbnav-margin-horizontal;
|
||||
}
|
||||
|
||||
|
||||
/* Items
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Items
|
||||
*/
|
||||
|
||||
.uk-thumbnav > * > * {
|
||||
display: inline-block;
|
||||
@if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-thumbnav > * > :hover {
|
||||
@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(){}
|
||||
233
client/uikit/src/scss/components/tile.scss
Normal file
233
client/uikit/src/scss/components/tile.scss
Normal file
@@ -0,0 +1,233 @@
|
||||
// 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 {
|
||||
display: flow-root;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* 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-color: $tile-default-background;
|
||||
@if(mixin-exists(hook-tile-default)) {@include hook-tile-default();}
|
||||
}
|
||||
|
||||
.uk-tile-default.uk-tile-hover:hover {
|
||||
@if(mixin-exists(hook-tile-default-hover)) {@include hook-tile-default-hover();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Muted
|
||||
*/
|
||||
|
||||
.uk-tile-muted {
|
||||
background-color: $tile-muted-background;
|
||||
@if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();}
|
||||
}
|
||||
|
||||
.uk-tile-muted.uk-tile-hover:hover {
|
||||
@if(mixin-exists(hook-tile-muted-hover)) {@include hook-tile-muted-hover();}
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-tile-primary {
|
||||
background-color: $tile-primary-background;
|
||||
@if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();}
|
||||
}
|
||||
|
||||
.uk-tile-primary.uk-tile-hover:hover {
|
||||
@if(mixin-exists(hook-tile-primary-hover)) {@include hook-tile-primary-hover();}
|
||||
}
|
||||
|
||||
// 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-color: $tile-secondary-background;
|
||||
@if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();}
|
||||
}
|
||||
|
||||
.uk-tile-secondary.uk-tile-hover:hover {
|
||||
@if(mixin-exists(hook-tile-secondary-hover)) {@include hook-tile-secondary-hover();}
|
||||
}
|
||||
|
||||
// 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-default-hover(){}
|
||||
// @mixin hook-tile-muted(){}
|
||||
// @mixin hook-tile-muted-hover(){}
|
||||
// @mixin hook-tile-primary(){}
|
||||
// @mixin hook-tile-primary-hover(){}
|
||||
// @mixin hook-tile-secondary(){}
|
||||
// @mixin hook-tile-secondary-hover(){}
|
||||
// @mixin hook-tile-misc(){}
|
||||
87
client/uikit/src/scss/components/tooltip.scss
Normal file
87
client/uikit/src/scss/components/tooltip.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
// 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. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
|
||||
* 4. Dimensions
|
||||
* 5. Style
|
||||
*/
|
||||
|
||||
.uk-tooltip {
|
||||
/* 1 */
|
||||
display: none;
|
||||
/* 2 */
|
||||
position: absolute;
|
||||
z-index: $tooltip-z-index;
|
||||
/* 3 */
|
||||
top: 0;
|
||||
/* 4 */
|
||||
box-sizing: border-box;
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
|
||||
/* 5 */
|
||||
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(){}
|
||||
69
client/uikit/src/scss/components/totop.scss
Normal file
69
client/uikit/src/scss/components/totop.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
// 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 */
|
||||
.uk-totop:hover {
|
||||
color: $totop-hover-color;
|
||||
@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(){}
|
||||
165
client/uikit/src/scss/components/transition.scss
Normal file
165
client/uikit/src/scss/components/transition.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
// 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-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
$transition-duration: 0.3s !default;
|
||||
|
||||
$transition-scale: 1.03 !default;
|
||||
|
||||
$transition-slide-small-translate: 10px !default;
|
||||
$transition-slide-medium-translate: 50px !default;
|
||||
|
||||
$transition-slow-duration: 0.7s !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Transition
|
||||
========================================================================== */
|
||||
|
||||
/* Transitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* The toggle is triggered on touch devices by two methods:
|
||||
* 1. Using `:focus` and tabindex
|
||||
* 2. Using `:hover` and a `touchstart` event listener registered on the document
|
||||
* (Doesn't work on Surface touch devices)
|
||||
*/
|
||||
|
||||
:where(.uk-transition-fade),
|
||||
:where([class*='uk-transition-scale']),
|
||||
:where([class*='uk-transition-slide']) {
|
||||
--uk-position-translate-x: 0;
|
||||
--uk-position-translate-y: 0;
|
||||
}
|
||||
|
||||
.uk-transition-fade,
|
||||
[class*='uk-transition-scale'],
|
||||
[class*='uk-transition-slide'] {
|
||||
--uk-translate-x: 0;
|
||||
--uk-translate-y: 0;
|
||||
--uk-scale-x: 1;
|
||||
--uk-scale-y: 1;
|
||||
transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y))
|
||||
translate(var(--uk-translate-x), var(--uk-translate-y))
|
||||
scale(var(--uk-scale-x), var(--uk-scale-y));
|
||||
transition: $transition-duration ease-out;
|
||||
transition-property: opacity, transform, filter;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fade
|
||||
*/
|
||||
|
||||
.uk-transition-toggle:hover .uk-transition-fade,
|
||||
.uk-transition-toggle:focus .uk-transition-fade,
|
||||
.uk-transition-toggle .uk-transition-fade:focus-within,
|
||||
.uk-transition-active.uk-active .uk-transition-fade { opacity: 1; }
|
||||
|
||||
/*
|
||||
* Scale
|
||||
* 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari.
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
|
||||
|
||||
.uk-transition-scale-up {
|
||||
--uk-scale-x: 1;
|
||||
--uk-scale-y: 1;
|
||||
}
|
||||
.uk-transition-scale-down {
|
||||
--uk-scale-x: #{$transition-scale};
|
||||
--uk-scale-y: #{$transition-scale};
|
||||
}
|
||||
|
||||
/* Show */
|
||||
.uk-transition-toggle:hover .uk-transition-scale-up,
|
||||
.uk-transition-toggle:focus .uk-transition-scale-up,
|
||||
.uk-transition-toggle .uk-transition-scale-up:focus-within,
|
||||
.uk-transition-active.uk-active .uk-transition-scale-up {
|
||||
--uk-scale-x: #{$transition-scale};
|
||||
--uk-scale-y: #{$transition-scale};
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uk-transition-toggle:hover .uk-transition-scale-down,
|
||||
.uk-transition-toggle:focus .uk-transition-scale-down,
|
||||
.uk-transition-toggle .uk-transition-scale-down:focus-within,
|
||||
.uk-transition-active.uk-active .uk-transition-scale-down {
|
||||
--uk-scale-x: 1;
|
||||
--uk-scale-y: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide
|
||||
*/
|
||||
|
||||
.uk-transition-slide-top { --uk-translate-y: -100%; }
|
||||
.uk-transition-slide-bottom { --uk-translate-y: 100%; }
|
||||
.uk-transition-slide-left { --uk-translate-x: -100%; }
|
||||
.uk-transition-slide-right { --uk-translate-x: 100%; }
|
||||
|
||||
.uk-transition-slide-top-small { --uk-translate-y: calc(-1 * #{$transition-slide-small-translate}); }
|
||||
.uk-transition-slide-bottom-small { --uk-translate-y: #{$transition-slide-small-translate}; }
|
||||
.uk-transition-slide-left-small { --uk-translate-x: calc(-1 * #{$transition-slide-small-translate}); }
|
||||
.uk-transition-slide-right-small { --uk-translate-x: #{$transition-slide-small-translate}; }
|
||||
|
||||
.uk-transition-slide-top-medium { --uk-translate-y: calc(-1 * #{$transition-slide-medium-translate}); }
|
||||
.uk-transition-slide-bottom-medium { --uk-translate-y: #{$transition-slide-medium-translate}; }
|
||||
.uk-transition-slide-left-medium { --uk-translate-x: calc(-1 * #{$transition-slide-medium-translate}); }
|
||||
.uk-transition-slide-right-medium { --uk-translate-x: #{$transition-slide-medium-translate}; }
|
||||
|
||||
/* Show */
|
||||
.uk-transition-toggle:hover [class*='uk-transition-slide'],
|
||||
.uk-transition-toggle:focus [class*='uk-transition-slide'],
|
||||
.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
|
||||
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
|
||||
--uk-translate-x: 0;
|
||||
--uk-translate-y: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* 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(){}
|
||||
490
client/uikit/src/scss/components/utility.scss
Normal file
490
client/uikit/src/scss/components/utility.scss
Normal file
@@ -0,0 +1,490 @@
|
||||
// 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-bottom: (-$box-shadow-bottom-height) !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-emphasis-color !default;
|
||||
$logo-hover-color: $global-emphasis-color !default;
|
||||
|
||||
$dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Utility
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/* Panel
|
||||
========================================================================== */
|
||||
|
||||
.uk-panel {
|
||||
display: flow-root;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 new layer 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 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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fix initial iframe width. Without the viewport is expanded on iOS devices
|
||||
*/
|
||||
|
||||
[uk-responsive],
|
||||
[data-uk-responsive] { max-width: 100%; }
|
||||
|
||||
|
||||
/* Border
|
||||
========================================================================== */
|
||||
|
||||
.uk-border-circle { border-radius: 50%; }
|
||||
.uk-border-pill { border-radius: 500px; }
|
||||
.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. Fix shadow being clipped in Safari if container is animated
|
||||
*/
|
||||
|
||||
@supports (filter: blur(0)) {
|
||||
|
||||
.uk-box-shadow-bottom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.uk-box-shadow-bottom::after {
|
||||
content: "";
|
||||
/* 1 */
|
||||
position: absolute;
|
||||
bottom: $box-shadow-bottom-bottom;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
/* 2 */
|
||||
height: $box-shadow-bottom-height;
|
||||
border-radius: $box-shadow-bottom-border-radius;
|
||||
background: $box-shadow-bottom-background;
|
||||
filter: blur($box-shadow-bottom-blur);
|
||||
/* 3 */
|
||||
will-change: filter;
|
||||
@if(mixin-exists(hook-box-shadow-bottom)) {@include hook-box-shadow-bottom();}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 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 */
|
||||
.uk-logo:hover {
|
||||
color: $logo-hover-color;
|
||||
/* 1 */
|
||||
text-decoration: none;
|
||||
@if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
|
||||
}
|
||||
|
||||
.uk-logo > :where(img, svg, video) { display: block; }
|
||||
|
||||
.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-emphasis-color !default;
|
||||
$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
|
||||
|
||||
|
||||
|
||||
// @mixin hook-inverse-dropcap(){}
|
||||
// @mixin hook-inverse-logo(){}
|
||||
// @mixin hook-inverse-logo-hover(){}
|
||||
123
client/uikit/src/scss/components/variables.scss
Normal file
123
client/uikit/src/scss/components/variables.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
//
|
||||
// Component: Variables
|
||||
// Description: Defines common values which are used across all components
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Load deprecated components
|
||||
// ========================================================================
|
||||
|
||||
$deprecated: false !default;
|
||||
|
||||
|
||||
// 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, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||||
$global-font-size: 16px !default;
|
||||
$global-line-height: 1.5 !default; // 24px
|
||||
|
||||
$global-2xlarge-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;
|
||||
146
client/uikit/src/scss/components/visibility.scss
Normal file
146
client/uikit/src/scss/components/visibility.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// 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; }
|
||||
|
||||
|
||||
/* Based on the State of the Parent Element
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Can't use `display: none` nor `visibility: hidden` because both are not focusable.
|
||||
* The target stays visible if any element within receives focus through keyboard.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Discard space when hidden.
|
||||
*/
|
||||
|
||||
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
|
||||
position: absolute !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Keep space when hidden.
|
||||
*/
|
||||
|
||||
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
|
||||
|
||||
|
||||
/* Based on Hover Capability of the Pointing Device
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
|
||||
/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
|
||||
@media (hover: none) {
|
||||
.uk-hidden-touch { display: none !important; }
|
||||
}
|
||||
|
||||
/* Hide if primary pointing device supports hover, e.g. mice. */
|
||||
@media (hover) {
|
||||
.uk-hidden-notouch { display: none !important; }
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-visibility-misc)) {@include hook-visibility-misc();}
|
||||
|
||||
// @mixin hook-visibility-misc(){}
|
||||
386
client/uikit/src/scss/components/width.scss
Normal file
386
client/uikit/src/scss/components/width.scss
Normal file
@@ -0,0 +1,386 @@
|
||||
// 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-2xlarge-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; }
|
||||
|
||||
/*
|
||||
* 1. Reset the `min-width`, which is set to auto by default, because
|
||||
* flex items won't shrink below their minimum intrinsic content size.
|
||||
* Using `1px` instead of `0`, so items still wrap into the next line,
|
||||
* if they have zero width and padding and the predecessor is 100% wide.
|
||||
*/
|
||||
|
||||
.uk-child-width-expand > :not([class*='uk-width']) {
|
||||
flex: 1;
|
||||
/* 1 */
|
||||
min-width: 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 > :not([class*='uk-width']) {
|
||||
flex: 1;
|
||||
min-width: 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 > :not([class*='uk-width']) {
|
||||
flex: 1;
|
||||
min-width: 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 > :not([class*='uk-width']) {
|
||||
flex: 1;
|
||||
min-width: 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 > :not([class*='uk-width']) {
|
||||
flex: 1;
|
||||
min-width: 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-2xlarge { width: $width-2xlarge-width; }
|
||||
@if ($deprecated == true) {
|
||||
.uk-width-xxlarge { width: $width-2xlarge-width; }
|
||||
}
|
||||
|
||||
/* Auto */
|
||||
.uk-width-auto { width: auto; }
|
||||
|
||||
/* Expand */
|
||||
.uk-width-expand {
|
||||
flex: 1;
|
||||
min-width: 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-2xlarge\@s { width: $width-2xlarge-width; }
|
||||
@if ($deprecated == true) {
|
||||
.uk-width-xxlarge\@s { width: $width-2xlarge-width; }
|
||||
}
|
||||
|
||||
/* Auto */
|
||||
.uk-width-auto\@s { width: auto; }
|
||||
|
||||
/* Expand */
|
||||
.uk-width-expand\@s {
|
||||
flex: 1;
|
||||
min-width: 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-2xlarge\@m { width: $width-2xlarge-width; }
|
||||
@if ($deprecated == true) {
|
||||
.uk-width-xxlarge\@m { width: $width-2xlarge-width; }
|
||||
}
|
||||
|
||||
/* Auto */
|
||||
.uk-width-auto\@m { width: auto; }
|
||||
|
||||
/* Expand */
|
||||
.uk-width-expand\@m {
|
||||
flex: 1;
|
||||
min-width: 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-2xlarge\@l { width: $width-2xlarge-width; }
|
||||
@if ($deprecated == true) {
|
||||
.uk-width-xxlarge\@l { width: $width-2xlarge-width; }
|
||||
}
|
||||
|
||||
/* Auto */
|
||||
.uk-width-auto\@l { width: auto; }
|
||||
|
||||
/* Expand */
|
||||
.uk-width-expand\@l {
|
||||
flex: 1;
|
||||
min-width: 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-2xlarge\@xl { width: $width-2xlarge-width; }
|
||||
@if ($deprecated == true) {
|
||||
.uk-width-xxlarge\@xl { width: $width-2xlarge-width; }
|
||||
}
|
||||
|
||||
/* Auto */
|
||||
.uk-width-auto\@xl { width: auto; }
|
||||
|
||||
/* Expand */
|
||||
.uk-width-expand\@xl {
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Intrinsic Widths
|
||||
========================================================================== */
|
||||
|
||||
.uk-width-max-content { width: max-content; }
|
||||
|
||||
.uk-width-min-content { width: min-content; }
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
@if(mixin-exists(hook-width-misc)) {@include hook-width-misc();}
|
||||
|
||||
// @mixin hook-width-misc(){}
|
||||
Reference in New Issue
Block a user