updates
This commit is contained in:
94
client/uikit/src/less/components/_import.less
vendored
Normal file
94
client/uikit/src/less/components/_import.less
vendored
Normal file
@@ -0,0 +1,94 @@
|
||||
// Base
|
||||
@import "variables.less";
|
||||
@import "mixin.less";
|
||||
@import "base.less";
|
||||
|
||||
// Elements
|
||||
@import "link.less";
|
||||
@import "heading.less";
|
||||
@import "divider.less";
|
||||
@import "list.less";
|
||||
@import "description-list.less";
|
||||
@import "table.less";
|
||||
@import "icon.less";
|
||||
@import "form-range.less";
|
||||
@import "form.less"; // After: Icon, Form Range
|
||||
@import "button.less";
|
||||
@import "progress.less";
|
||||
|
||||
// Layout
|
||||
@import "section.less";
|
||||
@import "container.less";
|
||||
@import "tile.less";
|
||||
@import "card.less";
|
||||
|
||||
// Common
|
||||
@import "close.less"; // After: Icon
|
||||
@import "spinner.less"; // After: Icon
|
||||
@import "totop.less"; // After: Icon
|
||||
@import "marker.less"; // After: Icon
|
||||
@import "alert.less"; // After: Close
|
||||
@import "placeholder.less";
|
||||
@import "badge.less";
|
||||
@import "label.less";
|
||||
@import "overlay.less"; // After: Icon
|
||||
@import "article.less";
|
||||
@import "comment.less";
|
||||
@import "search.less"; // After: Icon
|
||||
|
||||
// JavaScript
|
||||
@import "accordion.less";
|
||||
@import "drop.less"; // After: Card
|
||||
@import "dropdown.less"; // After: Card
|
||||
@import "modal.less"; // After: Close
|
||||
@import "slideshow.less";
|
||||
@import "slider.less";
|
||||
@import "sticky.less";
|
||||
@import "offcanvas.less";
|
||||
@import "switcher.less";
|
||||
@import "leader.less";
|
||||
@import "notification.less";
|
||||
@import "tooltip.less";
|
||||
@import "sortable.less";
|
||||
@import "countdown.less";
|
||||
// Scrollspy
|
||||
// Toggle
|
||||
// Scroll
|
||||
|
||||
@import "grid.less";
|
||||
|
||||
// Navs
|
||||
@import "nav.less";
|
||||
@import "navbar.less"; // After: Card, Grid, Nav, Icon, Search
|
||||
@import "subnav.less";
|
||||
@import "breadcrumb.less";
|
||||
@import "pagination.less";
|
||||
@import "tab.less";
|
||||
@import "slidenav.less"; // After: Icon
|
||||
@import "dotnav.less";
|
||||
@import "thumbnav.less";
|
||||
@import "iconnav.less";
|
||||
|
||||
@import "lightbox.less"; // After: Close, Slidenav
|
||||
|
||||
// Utilities
|
||||
@import "animation.less";
|
||||
@import "width.less";
|
||||
@import "height.less";
|
||||
@import "text.less";
|
||||
@import "column.less";
|
||||
@import "cover.less";
|
||||
@import "background.less";
|
||||
@import "align.less";
|
||||
@import "svg.less";
|
||||
@import "utility.less";
|
||||
@import "flex.less"; // After: Utility
|
||||
@import "margin.less";
|
||||
@import "padding.less";
|
||||
@import "position.less";
|
||||
@import "transition.less";
|
||||
@import "visibility.less";
|
||||
@import "inverse.less";
|
||||
|
||||
// Need to be loaded last
|
||||
@import "print.less";
|
||||
121
client/uikit/src/less/components/accordion.less
Normal file
121
client/uikit/src/less/components/accordion.less
Normal file
@@ -0,0 +1,121 @@
|
||||
// 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;
|
||||
|
||||
@accordion-title-font-size: @global-medium-font-size;
|
||||
@accordion-title-line-height: 1.4;
|
||||
@accordion-title-color: @global-emphasis-color;
|
||||
@accordion-title-hover-color: @global-color;
|
||||
|
||||
@accordion-content-margin-top: @global-margin;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Accordion
|
||||
========================================================================== */
|
||||
|
||||
.uk-accordion {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.hook-accordion();
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
========================================================================== */
|
||||
|
||||
.uk-accordion > :nth-child(n+2) {
|
||||
margin-top: @accordion-item-margin-top;
|
||||
.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;
|
||||
.hook-accordion-title();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-accordion-title:hover {
|
||||
color: @accordion-title-hover-color;
|
||||
text-decoration: none;
|
||||
.hook-accordion-title-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Content
|
||||
========================================================================== */
|
||||
|
||||
.uk-accordion-content {
|
||||
display: flow-root;
|
||||
margin-top: @accordion-content-margin-top;
|
||||
.hook-accordion-content();
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-accordion-content > :last-child { margin-bottom: 0; }
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion-misc();
|
||||
|
||||
.hook-accordion() {}
|
||||
.hook-accordion-item() {}
|
||||
.hook-accordion-title() {}
|
||||
.hook-accordion-title-hover() {}
|
||||
.hook-accordion-content() {}
|
||||
.hook-accordion-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-accordion-title-color: @inverse-global-emphasis-color;
|
||||
@inverse-accordion-title-hover-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-accordion > :nth-child(n+2) {
|
||||
.hook-inverse-accordion-item();
|
||||
}
|
||||
|
||||
.uk-accordion-title {
|
||||
color: @inverse-accordion-title-color;
|
||||
.hook-inverse-accordion-title();
|
||||
}
|
||||
|
||||
.uk-accordion-title:hover {
|
||||
color: @inverse-accordion-title-hover-color;
|
||||
.hook-inverse-accordion-title-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-accordion-item() {}
|
||||
.hook-inverse-accordion-title() {}
|
||||
.hook-inverse-accordion-title-hover() {}
|
||||
146
client/uikit/src/less/components/alert.less
Normal file
146
client/uikit/src/less/components/alert.less
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;
|
||||
@alert-padding: 15px;
|
||||
@alert-padding-right: @alert-padding + 14px;
|
||||
@alert-background: @global-muted-background;
|
||||
@alert-color: @global-color;
|
||||
|
||||
@alert-close-top: @alert-padding + 5px;
|
||||
@alert-close-right: @alert-padding;
|
||||
|
||||
@alert-primary-background: lighten(tint(@global-primary-background, 40%), 20%);
|
||||
@alert-primary-color: @global-primary-background;
|
||||
|
||||
@alert-success-background: lighten(tint(@global-success-background, 40%), 25%);
|
||||
@alert-success-color: @global-success-background;
|
||||
|
||||
@alert-warning-background: lighten(tint(@global-warning-background, 45%), 15%);
|
||||
@alert-warning-color: @global-warning-background;
|
||||
|
||||
@alert-danger-background: lighten(tint(@global-danger-background, 40%), 20%);
|
||||
@alert-danger-color: @global-danger-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-alert-close();
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from adjacent element
|
||||
*/
|
||||
|
||||
.uk-alert-close:first-child + * { margin-top: 0; }
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
|
||||
.uk-alert-close:hover {
|
||||
.hook-alert-close-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-alert-primary {
|
||||
background: @alert-primary-background;
|
||||
color: @alert-primary-color;
|
||||
.hook-alert-primary();
|
||||
}
|
||||
|
||||
/*
|
||||
* Success
|
||||
*/
|
||||
|
||||
.uk-alert-success {
|
||||
background: @alert-success-background;
|
||||
color: @alert-success-color;
|
||||
.hook-alert-success();
|
||||
}
|
||||
|
||||
/*
|
||||
* Warning
|
||||
*/
|
||||
|
||||
.uk-alert-warning {
|
||||
background: @alert-warning-background;
|
||||
color: @alert-warning-color;
|
||||
.hook-alert-warning();
|
||||
}
|
||||
|
||||
/*
|
||||
* Danger
|
||||
*/
|
||||
|
||||
.uk-alert-danger {
|
||||
background: @alert-danger-background;
|
||||
color: @alert-danger-color;
|
||||
.hook-alert-danger();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-alert-misc();
|
||||
|
||||
.hook-alert() {}
|
||||
.hook-alert-close() {}
|
||||
.hook-alert-close-hover() {}
|
||||
.hook-alert-primary() {}
|
||||
.hook-alert-success() {}
|
||||
.hook-alert-warning() {}
|
||||
.hook-alert-danger() {}
|
||||
.hook-alert-misc() {}
|
||||
142
client/uikit/src/less/components/align.less
Normal file
142
client/uikit/src/less/components/align.less
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;
|
||||
@align-margin-vertical: @global-gutter;
|
||||
|
||||
@align-margin-horizontal-l: @global-medium-gutter;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-align-misc();
|
||||
|
||||
.hook-align-misc() {}
|
||||
283
client/uikit/src/less/components/animation.less
Normal file
283
client/uikit/src/less/components/animation.less
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;
|
||||
@animation-fade-duration: 0.8s;
|
||||
@animation-stroke-duration: 2s;
|
||||
@animation-kenburns-duration: 15s;
|
||||
@animation-fast-duration: 0.1s;
|
||||
|
||||
@animation-slide-small-translate: 10px;
|
||||
@animation-slide-medium-translate: 50px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-animation-misc();
|
||||
|
||||
.hook-animation-misc() {}
|
||||
110
client/uikit/src/less/components/article.less
Normal file
110
client/uikit/src/less/components/article.less
Normal file
@@ -0,0 +1,110 @@
|
||||
// Name: Article
|
||||
// Description: Component to create articles
|
||||
//
|
||||
// Component: `uk-article`
|
||||
//
|
||||
// Sub-objects: `uk-article-title`
|
||||
// `uk-article-meta`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@article-margin-top: @global-large-margin;
|
||||
|
||||
@article-title-font-size-m: @global-2xlarge-font-size;
|
||||
@article-title-font-size: @article-title-font-size-m * 0.85;
|
||||
@article-title-line-height: 1.2;
|
||||
|
||||
@article-meta-font-size: @global-small-font-size;
|
||||
@article-meta-line-height: 1.4;
|
||||
@article-meta-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Article
|
||||
========================================================================== */
|
||||
|
||||
.uk-article {
|
||||
display: flow-root;
|
||||
.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;
|
||||
.hook-article-adjacent();
|
||||
}
|
||||
|
||||
|
||||
/* Title
|
||||
========================================================================== */
|
||||
|
||||
.uk-article-title {
|
||||
font-size: @article-title-font-size;
|
||||
line-height: @article-title-line-height;
|
||||
.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;
|
||||
.hook-article-meta();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-article-misc();
|
||||
|
||||
.hook-article() {}
|
||||
.hook-article-adjacent() {}
|
||||
.hook-article-title() {}
|
||||
.hook-article-meta() {}
|
||||
.hook-article-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-article-meta-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-article-title {
|
||||
.hook-inverse-article-title();
|
||||
}
|
||||
|
||||
.uk-article-meta {
|
||||
color: @inverse-article-meta-color;
|
||||
.hook-inverse-article-meta();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-article-title() {}
|
||||
.hook-inverse-article-meta() {}
|
||||
148
client/uikit/src/less/components/background.less
Normal file
148
client/uikit/src/less/components/background.less
Normal file
@@ -0,0 +1,148 @@
|
||||
// Name: Background
|
||||
// Description: Utilities for backgrounds
|
||||
//
|
||||
// Component: `uk-background-*`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@background-default-background: @global-background;
|
||||
@background-muted-background: @global-muted-background;
|
||||
@background-primary-background: @global-primary-background;
|
||||
@background-secondary-background: @global-secondary-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-background-misc();
|
||||
|
||||
.hook-background-misc() {}
|
||||
90
client/uikit/src/less/components/badge.less
Normal file
90
client/uikit/src/less/components/badge.less
Normal file
@@ -0,0 +1,90 @@
|
||||
// Name: Badge
|
||||
// Description: Component to create notification badges
|
||||
//
|
||||
// Component: `uk-badge`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@badge-size: 18px;
|
||||
@badge-padding-vertical: 0;
|
||||
@badge-padding-horizontal: 5px;
|
||||
@badge-border-radius: 500px;
|
||||
@badge-background: @global-primary-background;
|
||||
@badge-color: @global-inverse-color;
|
||||
@badge-font-size: 11px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-badge();
|
||||
}
|
||||
|
||||
/*
|
||||
* Required for `a`
|
||||
*/
|
||||
|
||||
.uk-badge:hover {
|
||||
text-decoration: none;
|
||||
.hook-badge-hover();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-badge-misc();
|
||||
|
||||
.hook-badge() {}
|
||||
.hook-badge-hover() {}
|
||||
.hook-badge-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-badge-background: @inverse-global-primary-background;
|
||||
@inverse-badge-color: @inverse-global-inverse-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-badge {
|
||||
background-color: @inverse-badge-background;
|
||||
color: @inverse-badge-color !important;
|
||||
.hook-inverse-badge();
|
||||
}
|
||||
|
||||
.uk-badge:hover {
|
||||
.hook-inverse-badge-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-badge() {}
|
||||
.hook-inverse-badge-hover() {}
|
||||
765
client/uikit/src/less/components/base.less
Normal file
765
client/uikit/src/less/components/base.less
Normal file
@@ -0,0 +1,765 @@
|
||||
// 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;
|
||||
@base-body-font-family: @global-font-family;
|
||||
@base-body-font-weight: normal;
|
||||
@base-body-font-size: @global-font-size;
|
||||
@base-body-line-height: @global-line-height;
|
||||
@base-body-color: @global-color;
|
||||
|
||||
@base-link-color: @global-link-color;
|
||||
@base-link-text-decoration: none;
|
||||
@base-link-hover-color: @global-link-hover-color;
|
||||
@base-link-hover-text-decoration: underline;
|
||||
|
||||
@base-strong-font-weight: bolder;
|
||||
@base-code-font-size: @global-small-font-size;
|
||||
@base-code-font-family: Consolas, monaco, monospace;
|
||||
@base-code-color: @global-danger-background;
|
||||
@base-em-color: @global-danger-background;
|
||||
@base-ins-background: #ffd;
|
||||
@base-ins-color: @global-color;
|
||||
@base-mark-background: #ffd;
|
||||
@base-mark-color: @global-color;
|
||||
@base-quote-font-style: italic;
|
||||
@base-small-font-size: 80%;
|
||||
|
||||
@base-margin-vertical: @global-margin;
|
||||
|
||||
@base-heading-font-family: @global-font-family;
|
||||
@base-heading-font-weight: normal;
|
||||
@base-heading-color: @global-emphasis-color;
|
||||
@base-heading-text-transform: none;
|
||||
@base-heading-margin-top: @global-medium-margin;
|
||||
@base-h1-font-size-m: @global-2xlarge-font-size;
|
||||
@base-h1-font-size: @base-h1-font-size-m * 0.85;
|
||||
@base-h1-line-height: 1.2;
|
||||
@base-h2-font-size-m: @global-xlarge-font-size;
|
||||
@base-h2-font-size: @base-h2-font-size-m * 0.85;
|
||||
@base-h2-line-height: 1.3;
|
||||
@base-h3-font-size: @global-large-font-size;
|
||||
@base-h3-line-height: 1.4;
|
||||
@base-h4-font-size: @global-medium-font-size;
|
||||
@base-h4-line-height: 1.4;
|
||||
@base-h5-font-size: @global-font-size;
|
||||
@base-h5-line-height: 1.4;
|
||||
@base-h6-font-size: @global-small-font-size;
|
||||
@base-h6-line-height: 1.4;
|
||||
|
||||
@base-list-padding-left: 30px;
|
||||
|
||||
@base-hr-margin-vertical: @global-margin;
|
||||
@base-hr-border-width: @global-border-width;
|
||||
@base-hr-border: @global-border;
|
||||
|
||||
@base-blockquote-font-size: @global-medium-font-size;
|
||||
@base-blockquote-line-height: 1.5;
|
||||
@base-blockquote-font-style: italic;
|
||||
@base-blockquote-margin-vertical: @global-margin;
|
||||
@base-blockquote-footer-margin-top: @global-small-margin;
|
||||
@base-blockquote-footer-font-size: @global-small-font-size;
|
||||
@base-blockquote-footer-line-height: 1.5;
|
||||
|
||||
@base-pre-font-size: @global-small-font-size;
|
||||
@base-pre-line-height: 1.5;
|
||||
@base-pre-font-family: @base-code-font-family;
|
||||
@base-pre-color: @global-color;
|
||||
|
||||
@base-focus-outline-width: 2px;
|
||||
@base-focus-outline-style: dotted;
|
||||
@base-focus-outline: @global-emphasis-color;
|
||||
@base-focus-outline-offset: 1px;
|
||||
|
||||
@base-selection-background: #39f;
|
||||
@base-selection-color: @global-inverse-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-base-h1();
|
||||
}
|
||||
|
||||
h2, .uk-h2 {
|
||||
font-size: @base-h2-font-size;
|
||||
line-height: @base-h2-line-height;
|
||||
.hook-base-h2();
|
||||
}
|
||||
|
||||
h3, .uk-h3 {
|
||||
font-size: @base-h3-font-size;
|
||||
line-height: @base-h3-line-height;
|
||||
.hook-base-h3();
|
||||
}
|
||||
|
||||
h4, .uk-h4 {
|
||||
font-size: @base-h4-font-size;
|
||||
line-height: @base-h4-line-height;
|
||||
.hook-base-h4();
|
||||
}
|
||||
|
||||
h5, .uk-h5 {
|
||||
font-size: @base-h5-font-size;
|
||||
line-height: @base-h5-line-height;
|
||||
.hook-base-h5();
|
||||
}
|
||||
|
||||
h6, .uk-h6 {
|
||||
font-size: @base-h6-font-size;
|
||||
line-height: @base-h6-line-height;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-base-blockquote-footer();
|
||||
}
|
||||
|
||||
|
||||
/* Preformatted text
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font: @base-pre-font-size e("/") @base-pre-line-height @base-pre-font-family;
|
||||
color: @base-pre-color;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
/* 1 */
|
||||
overflow: auto;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-misc();
|
||||
|
||||
.hook-base-body() {}
|
||||
.hook-base-link() {}
|
||||
.hook-base-link-hover() {}
|
||||
.hook-base-code() {}
|
||||
.hook-base-heading() {}
|
||||
.hook-base-h1() {}
|
||||
.hook-base-h2() {}
|
||||
.hook-base-h3() {}
|
||||
.hook-base-h4() {}
|
||||
.hook-base-h5() {}
|
||||
.hook-base-h6() {}
|
||||
.hook-base-hr() {}
|
||||
.hook-base-blockquote() {}
|
||||
.hook-base-blockquote-footer() {}
|
||||
.hook-base-pre() {}
|
||||
.hook-base-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-base-color: @inverse-global-color;
|
||||
@inverse-base-link-color: @inverse-global-emphasis-color;
|
||||
@inverse-base-link-hover-color: @inverse-global-emphasis-color;
|
||||
@inverse-base-code-color: @inverse-global-color;
|
||||
@inverse-base-em-color: @inverse-global-emphasis-color;
|
||||
@inverse-base-heading-color: @inverse-global-emphasis-color;
|
||||
@inverse-base-hr-border: @inverse-global-border;
|
||||
@inverse-base-focus-outline: @inverse-global-emphasis-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
color: @inverse-base-color;
|
||||
|
||||
// Base
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// Link
|
||||
//
|
||||
|
||||
a,
|
||||
.uk-link {
|
||||
color: @inverse-base-link-color;
|
||||
.hook-inverse-base-link();
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.uk-link:hover,
|
||||
.uk-link-toggle:hover .uk-link {
|
||||
color: @inverse-base-link-hover-color;
|
||||
.hook-inverse-base-link-hover();
|
||||
}
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
:not(pre) > code,
|
||||
:not(pre) > kbd,
|
||||
:not(pre) > samp {
|
||||
color: @inverse-base-code-color;
|
||||
.hook-inverse-base-code();
|
||||
}
|
||||
|
||||
//
|
||||
// Emphasize
|
||||
//
|
||||
|
||||
em { color: @inverse-base-em-color; }
|
||||
|
||||
//
|
||||
// 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 {
|
||||
color: @inverse-base-heading-color;
|
||||
.hook-inverse-base-heading();
|
||||
}
|
||||
|
||||
h1, .uk-h1 {
|
||||
.hook-inverse-base-h1();
|
||||
}
|
||||
|
||||
h2, .uk-h2 {
|
||||
.hook-inverse-base-h2();
|
||||
}
|
||||
|
||||
h3, .uk-h3 {
|
||||
.hook-inverse-base-h3();
|
||||
}
|
||||
|
||||
h4, .uk-h4 {
|
||||
.hook-inverse-base-h4();
|
||||
}
|
||||
|
||||
h5, .uk-h5 {
|
||||
.hook-inverse-base-h5();
|
||||
}
|
||||
|
||||
h6, .uk-h6 {
|
||||
.hook-inverse-base-h6();
|
||||
}
|
||||
|
||||
//
|
||||
// Blockquotes
|
||||
//
|
||||
|
||||
blockquote {
|
||||
.hook-inverse-base-blockquote();
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
.hook-inverse-base-blockquote-footer();
|
||||
}
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr, .uk-hr {
|
||||
border-top-color: @inverse-base-hr-border;
|
||||
.hook-inverse-base-hr();
|
||||
}
|
||||
|
||||
//
|
||||
// Focus
|
||||
//
|
||||
|
||||
:focus { outline-color: @inverse-base-focus-outline; }
|
||||
:focus-visible { outline-color: @inverse-base-focus-outline; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-base-link() {}
|
||||
.hook-inverse-base-link-hover() {}
|
||||
.hook-inverse-base-code() {}
|
||||
.hook-inverse-base-heading() {}
|
||||
.hook-inverse-base-h1() {}
|
||||
.hook-inverse-base-h2() {}
|
||||
.hook-inverse-base-h3() {}
|
||||
.hook-inverse-base-h4() {}
|
||||
.hook-inverse-base-h5() {}
|
||||
.hook-inverse-base-h6() {}
|
||||
.hook-inverse-base-blockquote() {}
|
||||
.hook-inverse-base-blockquote-footer() {}
|
||||
.hook-inverse-base-hr() {}
|
||||
153
client/uikit/src/less/components/breadcrumb.less
Normal file
153
client/uikit/src/less/components/breadcrumb.less
Normal file
@@ -0,0 +1,153 @@
|
||||
// Name: Breadcrumb
|
||||
// Description: Component to create a breadcrumb navigation
|
||||
//
|
||||
// Component: `uk-breadcrumb`
|
||||
//
|
||||
// States: `uk-disabled`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@breadcrumb-item-font-size: @global-small-font-size;
|
||||
@breadcrumb-item-color: @global-muted-color;
|
||||
@breadcrumb-item-hover-color: @global-color;
|
||||
@breadcrumb-item-hover-text-decoration: none;
|
||||
@breadcrumb-item-active-color: @global-color;
|
||||
|
||||
@breadcrumb-divider: "/";
|
||||
@breadcrumb-divider-margin-horizontal: 20px;
|
||||
@breadcrumb-divider-font-size: @breadcrumb-item-font-size;
|
||||
@breadcrumb-divider-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Breadcrumb
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Reset list
|
||||
*/
|
||||
|
||||
.uk-breadcrumb {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.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;
|
||||
.hook-breadcrumb-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-breadcrumb > * > :hover {
|
||||
color: @breadcrumb-item-hover-color;
|
||||
text-decoration: @breadcrumb-item-hover-text-decoration;
|
||||
.hook-breadcrumb-item-hover();
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.uk-breadcrumb > .uk-disabled > * {
|
||||
.hook-breadcrumb-item-disabled();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-breadcrumb > :last-child > span,
|
||||
.uk-breadcrumb > :last-child > a:not([href]) {
|
||||
color: @breadcrumb-item-active-color;
|
||||
.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 ~'calc(@{breadcrumb-divider-margin-horizontal} - 4px)';
|
||||
/* 2 */
|
||||
font-size: @breadcrumb-divider-font-size;
|
||||
color: @breadcrumb-divider-color;
|
||||
.hook-breadcrumb-divider();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-breadcrumb-misc();
|
||||
|
||||
.hook-breadcrumb() {}
|
||||
.hook-breadcrumb-item() {}
|
||||
.hook-breadcrumb-item-hover() {}
|
||||
.hook-breadcrumb-item-disabled() {}
|
||||
.hook-breadcrumb-item-active() {}
|
||||
.hook-breadcrumb-divider() {}
|
||||
.hook-breadcrumb-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-breadcrumb-item-color: @inverse-global-muted-color;
|
||||
@inverse-breadcrumb-item-hover-color: @inverse-global-color;
|
||||
@inverse-breadcrumb-item-active-color: @inverse-global-color;
|
||||
@inverse-breadcrumb-divider-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-breadcrumb > * > * {
|
||||
color: @inverse-breadcrumb-item-color;
|
||||
.hook-inverse-breadcrumb-item();
|
||||
}
|
||||
|
||||
.uk-breadcrumb > * > :hover {
|
||||
color: @inverse-breadcrumb-item-hover-color;
|
||||
.hook-inverse-breadcrumb-item-hover();
|
||||
}
|
||||
|
||||
|
||||
.uk-breadcrumb > .uk-disabled > * {
|
||||
.hook-inverse-breadcrumb-item-disabled();
|
||||
}
|
||||
|
||||
.uk-breadcrumb > :last-child > * {
|
||||
color: @inverse-breadcrumb-item-active-color;
|
||||
.hook-inverse-breadcrumb-item-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Divider
|
||||
//
|
||||
|
||||
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
|
||||
color: @inverse-breadcrumb-divider-color;
|
||||
.hook-inverse-breadcrumb-divider();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-breadcrumb-item() {}
|
||||
.hook-inverse-breadcrumb-item-hover() {}
|
||||
.hook-inverse-breadcrumb-item-disabled() {}
|
||||
.hook-inverse-breadcrumb-item-active() {}
|
||||
.hook-inverse-breadcrumb-divider() {}
|
||||
540
client/uikit/src/less/components/button.less
Normal file
540
client/uikit/src/less/components/button.less
Normal file
@@ -0,0 +1,540 @@
|
||||
// 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;
|
||||
@button-small-line-height: @global-control-small-height;
|
||||
@button-large-line-height: @global-control-large-height;
|
||||
|
||||
@button-font-size: @global-font-size;
|
||||
@button-small-font-size: @global-small-font-size;
|
||||
@button-large-font-size: @global-medium-font-size;
|
||||
|
||||
@button-padding-horizontal: @global-gutter;
|
||||
@button-small-padding-horizontal: @global-small-gutter;
|
||||
@button-large-padding-horizontal: @global-medium-gutter;
|
||||
|
||||
@button-default-background: @global-muted-background;
|
||||
@button-default-color: @global-emphasis-color;
|
||||
@button-default-hover-background: darken(@button-default-background, 5%);
|
||||
@button-default-hover-color: @global-emphasis-color;
|
||||
@button-default-active-background: darken(@button-default-background, 10%);
|
||||
@button-default-active-color: @global-emphasis-color;
|
||||
|
||||
@button-primary-background: @global-primary-background;
|
||||
@button-primary-color: @global-inverse-color;
|
||||
@button-primary-hover-background: darken(@button-primary-background, 5%);
|
||||
@button-primary-hover-color: @global-inverse-color;
|
||||
@button-primary-active-background: darken(@button-primary-background, 10%);
|
||||
@button-primary-active-color: @global-inverse-color;
|
||||
|
||||
@button-secondary-background: @global-secondary-background;
|
||||
@button-secondary-color: @global-inverse-color;
|
||||
@button-secondary-hover-background: darken(@button-secondary-background, 5%);
|
||||
@button-secondary-hover-color: @global-inverse-color;
|
||||
@button-secondary-active-background: darken(@button-secondary-background, 10%);
|
||||
@button-secondary-active-color: @global-inverse-color;
|
||||
|
||||
@button-danger-background: @global-danger-background;
|
||||
@button-danger-color: @global-inverse-color;
|
||||
@button-danger-hover-background: darken(@button-danger-background, 5%);
|
||||
@button-danger-hover-color: @global-inverse-color;
|
||||
@button-danger-active-background: darken(@button-danger-background, 10%);
|
||||
@button-danger-active-color: @global-inverse-color;
|
||||
|
||||
@button-disabled-background: @global-muted-background;
|
||||
@button-disabled-color: @global-muted-color;
|
||||
|
||||
@button-text-line-height: @global-line-height;
|
||||
@button-text-color: @global-emphasis-color;
|
||||
@button-text-hover-color: @global-muted-color;
|
||||
@button-text-disabled-color: @global-muted-color;
|
||||
|
||||
@button-link-line-height: @global-line-height;
|
||||
@button-link-color: @global-emphasis-color;
|
||||
@button-link-hover-color: @global-muted-color;
|
||||
@button-link-hover-text-decoration: none;
|
||||
@button-link-disabled-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-button-hover();
|
||||
}
|
||||
|
||||
/* OnClick + Active */
|
||||
.uk-button:active,
|
||||
.uk-button.uk-active {
|
||||
.hook-button-active();
|
||||
}
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
|
||||
.uk-button-default {
|
||||
background-color: @button-default-background;
|
||||
color: @button-default-color;
|
||||
.hook-button-default();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-button-default:hover {
|
||||
background-color: @button-default-hover-background;
|
||||
color: @button-default-hover-color;
|
||||
.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;
|
||||
.hook-button-default-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-button-primary {
|
||||
background-color: @button-primary-background;
|
||||
color: @button-primary-color;
|
||||
.hook-button-primary();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-button-primary:hover {
|
||||
background-color: @button-primary-hover-background;
|
||||
color: @button-primary-hover-color;
|
||||
.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;
|
||||
.hook-button-primary-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Secondary
|
||||
*/
|
||||
|
||||
.uk-button-secondary {
|
||||
background-color: @button-secondary-background;
|
||||
color: @button-secondary-color;
|
||||
.hook-button-secondary();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-button-secondary:hover {
|
||||
background-color: @button-secondary-hover-background;
|
||||
color: @button-secondary-hover-color;
|
||||
.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;
|
||||
.hook-button-secondary-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Danger
|
||||
*/
|
||||
|
||||
.uk-button-danger {
|
||||
background-color: @button-danger-background;
|
||||
color: @button-danger-color;
|
||||
.hook-button-danger();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-button-danger:hover {
|
||||
background-color: @button-danger-hover-background;
|
||||
color: @button-danger-hover-color;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-button-small();
|
||||
}
|
||||
|
||||
.uk-button-large {
|
||||
padding: 0 @button-large-padding-horizontal;
|
||||
line-height: @button-large-line-height;
|
||||
font-size: @button-large-font-size;
|
||||
.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;
|
||||
.hook-button-text();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-button-text:hover {
|
||||
color: @button-text-hover-color;
|
||||
.hook-button-text-hover();
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.uk-button-text:disabled {
|
||||
color: @button-text-disabled-color;
|
||||
.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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-misc();
|
||||
|
||||
.hook-button() {}
|
||||
.hook-button-hover() {}
|
||||
.hook-button-active() {}
|
||||
.hook-button-default() {}
|
||||
.hook-button-default-hover() {}
|
||||
.hook-button-default-active() {}
|
||||
.hook-button-primary() {}
|
||||
.hook-button-primary-hover() {}
|
||||
.hook-button-primary-active() {}
|
||||
.hook-button-secondary() {}
|
||||
.hook-button-secondary-hover() {}
|
||||
.hook-button-secondary-active() {}
|
||||
.hook-button-danger() {}
|
||||
.hook-button-danger-hover() {}
|
||||
.hook-button-danger-active() {}
|
||||
.hook-button-disabled() {}
|
||||
.hook-button-small() {}
|
||||
.hook-button-large() {}
|
||||
.hook-button-text() {}
|
||||
.hook-button-text-hover() {}
|
||||
.hook-button-text-disabled() {}
|
||||
.hook-button-link() {}
|
||||
.hook-button-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-button-default-background: @inverse-global-primary-background;
|
||||
@inverse-button-default-color: @inverse-global-inverse-color;
|
||||
@inverse-button-default-hover-background: darken(@inverse-button-default-background, 5%);
|
||||
@inverse-button-default-hover-color: @inverse-global-inverse-color;
|
||||
@inverse-button-default-active-background: darken(@inverse-button-default-background, 10%);
|
||||
@inverse-button-default-active-color: @inverse-global-inverse-color;
|
||||
@inverse-button-primary-background: @inverse-global-primary-background;
|
||||
@inverse-button-primary-color: @inverse-global-inverse-color;
|
||||
@inverse-button-primary-hover-background: darken(@inverse-button-primary-background, 5%);
|
||||
@inverse-button-primary-hover-color: @inverse-global-inverse-color;
|
||||
@inverse-button-primary-active-background: darken(@inverse-button-primary-background, 10%);
|
||||
@inverse-button-primary-active-color: @inverse-global-inverse-color;
|
||||
@inverse-button-secondary-background: @inverse-global-primary-background;
|
||||
@inverse-button-secondary-color: @inverse-global-inverse-color;
|
||||
@inverse-button-secondary-hover-background: darken(@inverse-button-secondary-background, 5%);
|
||||
@inverse-button-secondary-hover-color: @inverse-global-inverse-color;
|
||||
@inverse-button-secondary-active-background: darken(@inverse-button-secondary-background, 10%);
|
||||
@inverse-button-secondary-active-color: @inverse-global-inverse-color;
|
||||
@inverse-button-text-color: @inverse-global-emphasis-color;
|
||||
@inverse-button-text-hover-color: @inverse-global-muted-color;
|
||||
@inverse-button-text-disabled-color: @inverse-global-muted-color;
|
||||
@inverse-button-link-color: @inverse-global-emphasis-color;
|
||||
@inverse-button-link-hover-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
//
|
||||
// Default
|
||||
//
|
||||
|
||||
.uk-button-default {
|
||||
background-color: @inverse-button-default-background;
|
||||
color: @inverse-button-default-color;
|
||||
.hook-inverse-button-default();
|
||||
}
|
||||
|
||||
.uk-button-default:hover {
|
||||
background-color: @inverse-button-default-hover-background;
|
||||
color: @inverse-button-default-hover-color;
|
||||
.hook-inverse-button-default-hover();
|
||||
}
|
||||
|
||||
.uk-button-default:active,
|
||||
.uk-button-default.uk-active {
|
||||
background-color: @inverse-button-default-active-background;
|
||||
color: @inverse-button-default-active-color;
|
||||
.hook-inverse-button-default-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Primary
|
||||
//
|
||||
|
||||
.uk-button-primary {
|
||||
background-color: @inverse-button-primary-background;
|
||||
color: @inverse-button-primary-color;
|
||||
.hook-inverse-button-primary();
|
||||
}
|
||||
|
||||
.uk-button-primary:hover {
|
||||
background-color: @inverse-button-primary-hover-background;
|
||||
color: @inverse-button-primary-hover-color;
|
||||
.hook-inverse-button-primary-hover();
|
||||
}
|
||||
|
||||
.uk-button-primary:active,
|
||||
.uk-button-primary.uk-active {
|
||||
background-color: @inverse-button-primary-active-background;
|
||||
color: @inverse-button-primary-active-color;
|
||||
.hook-inverse-button-primary-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Secondary
|
||||
//
|
||||
|
||||
.uk-button-secondary {
|
||||
background-color: @inverse-button-secondary-background;
|
||||
color: @inverse-button-secondary-color;
|
||||
.hook-inverse-button-secondary();
|
||||
}
|
||||
|
||||
.uk-button-secondary:hover {
|
||||
background-color: @inverse-button-secondary-hover-background;
|
||||
color: @inverse-button-secondary-hover-color;
|
||||
.hook-inverse-button-secondary-hover();
|
||||
}
|
||||
|
||||
.uk-button-secondary:active,
|
||||
.uk-button-secondary.uk-active {
|
||||
background-color: @inverse-button-secondary-active-background;
|
||||
color: @inverse-button-secondary-active-color;
|
||||
.hook-inverse-button-secondary-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Text
|
||||
//
|
||||
|
||||
.uk-button-text {
|
||||
color: @inverse-button-text-color;
|
||||
.hook-inverse-button-text();
|
||||
}
|
||||
|
||||
.uk-button-text:hover {
|
||||
color: @inverse-button-text-hover-color;
|
||||
.hook-inverse-button-text-hover();
|
||||
}
|
||||
|
||||
.uk-button-text:disabled {
|
||||
color: @inverse-button-text-disabled-color;
|
||||
.hook-inverse-button-text-disabled();
|
||||
}
|
||||
|
||||
//
|
||||
// Link
|
||||
//
|
||||
|
||||
.uk-button-link {
|
||||
color: @inverse-button-link-color;
|
||||
.hook-inverse-button-link();
|
||||
}
|
||||
|
||||
.uk-button-link:hover { color: @inverse-button-link-hover-color; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-button-default() {}
|
||||
.hook-inverse-button-default-hover() {}
|
||||
.hook-inverse-button-default-active() {}
|
||||
.hook-inverse-button-primary() {}
|
||||
.hook-inverse-button-primary-hover() {}
|
||||
.hook-inverse-button-primary-active() {}
|
||||
.hook-inverse-button-secondary() {}
|
||||
.hook-inverse-button-secondary-hover() {}
|
||||
.hook-inverse-button-secondary-active() {}
|
||||
.hook-inverse-button-text() {}
|
||||
.hook-inverse-button-text-hover() {}
|
||||
.hook-inverse-button-text-disabled() {}
|
||||
.hook-inverse-button-link() {}
|
||||
392
client/uikit/src/less/components/card.less
Normal file
392
client/uikit/src/less/components/card.less
Normal file
@@ -0,0 +1,392 @@
|
||||
// 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;
|
||||
@card-body-padding-vertical: @global-gutter;
|
||||
|
||||
@card-body-padding-horizontal-l: @global-medium-gutter;
|
||||
@card-body-padding-vertical-l: @global-medium-gutter;
|
||||
|
||||
@card-header-padding-horizontal: @global-gutter;
|
||||
@card-header-padding-vertical: round((@global-gutter / 2));
|
||||
|
||||
@card-header-padding-horizontal-l: @global-medium-gutter;
|
||||
@card-header-padding-vertical-l: round((@global-medium-gutter / 2));
|
||||
|
||||
@card-footer-padding-horizontal: @global-gutter;
|
||||
@card-footer-padding-vertical: (@global-gutter / 2);
|
||||
|
||||
@card-footer-padding-horizontal-l: @global-medium-gutter;
|
||||
@card-footer-padding-vertical-l: round((@global-medium-gutter / 2));
|
||||
|
||||
@card-title-font-size: @global-large-font-size;
|
||||
@card-title-line-height: 1.4;
|
||||
|
||||
@card-badge-top: 15px;
|
||||
@card-badge-right: 15px;
|
||||
@card-badge-height: 22px;
|
||||
@card-badge-padding-horizontal: 10px;
|
||||
@card-badge-background: @global-primary-background;
|
||||
@card-badge-color: @global-inverse-color;
|
||||
@card-badge-font-size: @global-small-font-size;
|
||||
|
||||
@card-hover-background: @global-muted-background;
|
||||
|
||||
@card-default-background: @global-muted-background;
|
||||
@card-default-color: @global-color;
|
||||
@card-default-title-color: @global-emphasis-color;
|
||||
@card-default-hover-background: darken(@card-default-background, 5%);
|
||||
|
||||
@card-primary-background: @global-primary-background;
|
||||
@card-primary-color: @global-inverse-color;
|
||||
@card-primary-title-color: @card-primary-color;
|
||||
@card-primary-hover-background: darken(@card-primary-background, 5%);
|
||||
@card-primary-color-mode: light;
|
||||
|
||||
@card-secondary-background: @global-secondary-background;
|
||||
@card-secondary-color: @global-inverse-color;
|
||||
@card-secondary-title-color: @card-secondary-color;
|
||||
@card-secondary-hover-background: darken(@card-secondary-background, 5%);
|
||||
@card-secondary-color-mode: light;
|
||||
|
||||
@card-small-body-padding-horizontal: @global-margin;
|
||||
@card-small-body-padding-vertical: @global-margin;
|
||||
@card-small-header-padding-horizontal: @global-margin;
|
||||
@card-small-header-padding-vertical: round((@global-margin / 1.5));
|
||||
@card-small-footer-padding-horizontal: @global-margin;
|
||||
@card-small-footer-padding-vertical: round((@global-margin / 1.5));
|
||||
|
||||
@card-large-body-padding-horizontal-l: @global-large-gutter;
|
||||
@card-large-body-padding-vertical-l: @global-large-gutter;
|
||||
@card-large-header-padding-horizontal-l: @global-large-gutter;
|
||||
@card-large-header-padding-vertical-l: round((@global-large-gutter / 2));
|
||||
@card-large-footer-padding-horizontal-l: @global-large-gutter;
|
||||
@card-large-footer-padding-vertical-l: round((@global-large-gutter / 2));
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Card
|
||||
========================================================================== */
|
||||
|
||||
.uk-card {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.hook-card();
|
||||
}
|
||||
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
.uk-card-body {
|
||||
display: flow-root;
|
||||
padding: @card-body-padding-vertical @card-body-padding-horizontal;
|
||||
.hook-card-body();
|
||||
}
|
||||
|
||||
.uk-card-header {
|
||||
display: flow-root;
|
||||
padding: @card-header-padding-vertical @card-header-padding-horizontal;
|
||||
.hook-card-header();
|
||||
}
|
||||
|
||||
.uk-card-footer {
|
||||
display: flow-root;
|
||||
padding: @card-footer-padding-vertical @card-footer-padding-horizontal;
|
||||
.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'] {
|
||||
.hook-card-media();
|
||||
}
|
||||
|
||||
.uk-card-media-top,
|
||||
.uk-grid-stack > .uk-card-media-left,
|
||||
.uk-grid-stack > .uk-card-media-right {
|
||||
.hook-card-media-top();
|
||||
}
|
||||
|
||||
.uk-card-media-bottom {
|
||||
.hook-card-media-bottom();
|
||||
}
|
||||
|
||||
:not(.uk-grid-stack) > .uk-card-media-left {
|
||||
.hook-card-media-left();
|
||||
}
|
||||
|
||||
:not(.uk-grid-stack) > .uk-card-media-right {
|
||||
.hook-card-media-right();
|
||||
}
|
||||
|
||||
|
||||
/* Title
|
||||
========================================================================== */
|
||||
|
||||
.uk-card-title {
|
||||
font-size: @card-title-font-size;
|
||||
line-height: @card-title-line-height;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-card-default();
|
||||
}
|
||||
|
||||
.uk-card-default .uk-card-title {
|
||||
color: @card-default-title-color;
|
||||
.hook-card-default-title();
|
||||
}
|
||||
|
||||
.uk-card-default.uk-card-hover:hover {
|
||||
background-color: @card-default-hover-background;
|
||||
.hook-card-default-hover();
|
||||
}
|
||||
|
||||
.uk-card-default .uk-card-header {
|
||||
.hook-card-default-header();
|
||||
}
|
||||
|
||||
.uk-card-default .uk-card-footer {
|
||||
.hook-card-default-footer();
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-card-primary {
|
||||
background-color: @card-primary-background;
|
||||
color: @card-primary-color;
|
||||
.hook-card-primary();
|
||||
}
|
||||
|
||||
.uk-card-primary .uk-card-title {
|
||||
color: @card-primary-title-color;
|
||||
.hook-card-primary-title();
|
||||
}
|
||||
|
||||
.uk-card-primary.uk-card-hover:hover {
|
||||
background-color: @card-primary-hover-background;
|
||||
.hook-card-primary-hover();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-card-primary.uk-card-body:extend(.uk-light all) when (@card-primary-color-mode = light) {}
|
||||
.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-primary-color-mode = light) {}
|
||||
.uk-card-primary.uk-card-body:extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
|
||||
.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
|
||||
|
||||
/*
|
||||
* Secondary
|
||||
*/
|
||||
|
||||
.uk-card-secondary {
|
||||
background-color: @card-secondary-background;
|
||||
color: @card-secondary-color;
|
||||
.hook-card-secondary();
|
||||
}
|
||||
|
||||
.uk-card-secondary .uk-card-title {
|
||||
color: @card-secondary-title-color;
|
||||
.hook-card-secondary-title();
|
||||
}
|
||||
|
||||
.uk-card-secondary.uk-card-hover:hover {
|
||||
background-color: @card-secondary-hover-background;
|
||||
.hook-card-secondary-hover();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-card-secondary.uk-card-body:extend(.uk-light all) when (@card-secondary-color-mode = light) {}
|
||||
.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
|
||||
.uk-card-secondary.uk-card-body:extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
|
||||
.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
|
||||
|
||||
|
||||
/* 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
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-misc();
|
||||
|
||||
.hook-card() {}
|
||||
.hook-card-body() {}
|
||||
.hook-card-header() {}
|
||||
.hook-card-footer() {}
|
||||
.hook-card-media() {}
|
||||
.hook-card-media-top() {}
|
||||
.hook-card-media-bottom() {}
|
||||
.hook-card-media-left() {}
|
||||
.hook-card-media-right() {}
|
||||
.hook-card-title() {}
|
||||
.hook-card-badge() {}
|
||||
.hook-card-hover() {}
|
||||
.hook-card-default() {}
|
||||
.hook-card-default-title() {}
|
||||
.hook-card-default-hover() {}
|
||||
.hook-card-default-header() {}
|
||||
.hook-card-default-footer() {}
|
||||
.hook-card-primary() {}
|
||||
.hook-card-primary-title() {}
|
||||
.hook-card-primary-hover() {}
|
||||
.hook-card-secondary() {}
|
||||
.hook-card-secondary-title() {}
|
||||
.hook-card-secondary-hover() {}
|
||||
.hook-card-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-card-badge-background: @inverse-global-primary-background;
|
||||
@inverse-card-badge-color: @inverse-global-inverse-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
&.uk-card-badge {
|
||||
background-color: @inverse-card-badge-background;
|
||||
color: @inverse-card-badge-color;
|
||||
.hook-inverse-card-badge();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-card-badge() {}
|
||||
67
client/uikit/src/less/components/close.less
Normal file
67
client/uikit/src/less/components/close.less
Normal file
@@ -0,0 +1,67 @@
|
||||
// Name: Close
|
||||
// Description: Component to create a close button
|
||||
//
|
||||
// Component: `uk-close`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@close-color: @global-muted-color;
|
||||
@close-hover-color: @global-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Close
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Adopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-close {
|
||||
color: @close-color;
|
||||
.hook-close();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-close:hover {
|
||||
color: @close-hover-color;
|
||||
.hook-close-hover();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-close-misc();
|
||||
|
||||
.hook-close() {}
|
||||
.hook-close-hover() {}
|
||||
.hook-close-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-close-color: @inverse-global-muted-color;
|
||||
@inverse-close-hover-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-close {
|
||||
color: @inverse-close-color;
|
||||
.hook-inverse-close();
|
||||
}
|
||||
|
||||
.uk-close:hover {
|
||||
color: @inverse-close-hover-color;
|
||||
.hook-inverse-close-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-close() {}
|
||||
.hook-inverse-close-hover() {}
|
||||
143
client/uikit/src/less/components/column.less
Normal file
143
client/uikit/src/less/components/column.less
Normal file
@@ -0,0 +1,143 @@
|
||||
// Name: Column
|
||||
// Description: Utilities for text columns
|
||||
//
|
||||
// Component: `uk-column-*`
|
||||
//
|
||||
// Sub-objects: `uk-column-span`
|
||||
//
|
||||
// Modifiers: `uk-column-divider`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@column-gutter: @global-gutter;
|
||||
@column-gutter-l: @global-medium-gutter;
|
||||
|
||||
@column-divider-rule-color: @global-border;
|
||||
@column-divider-rule-width: 1px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-column-misc();
|
||||
|
||||
.hook-column-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-column-divider-rule-color: @inverse-global-border;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-column-divider { column-rule-color: @inverse-column-divider-rule-color; }
|
||||
|
||||
}
|
||||
160
client/uikit/src/less/components/comment.less
Normal file
160
client/uikit/src/less/components/comment.less
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;
|
||||
|
||||
@comment-title-font-size: @global-medium-font-size;
|
||||
@comment-title-line-height: 1.4;
|
||||
|
||||
@comment-meta-font-size: @global-small-font-size;
|
||||
@comment-meta-line-height: 1.4;
|
||||
@comment-meta-color: @global-muted-color;
|
||||
|
||||
@comment-list-margin-top: @global-large-margin;
|
||||
@comment-list-padding-left: 30px;
|
||||
@comment-list-padding-left-m: 100px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Comment
|
||||
========================================================================== */
|
||||
|
||||
.uk-comment {
|
||||
.hook-comment();
|
||||
}
|
||||
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
.uk-comment-body {
|
||||
display: flow-root;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
.hook-comment-body();
|
||||
}
|
||||
|
||||
.uk-comment-header {
|
||||
display: flow-root;
|
||||
margin-bottom: @comment-header-margin-bottom;
|
||||
.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;
|
||||
.hook-comment-title();
|
||||
}
|
||||
|
||||
|
||||
/* Meta
|
||||
========================================================================== */
|
||||
|
||||
.uk-comment-meta {
|
||||
font-size: @comment-meta-font-size;
|
||||
line-height: @comment-meta-line-height;
|
||||
color: @comment-meta-color;
|
||||
.hook-comment-meta();
|
||||
}
|
||||
|
||||
|
||||
/* Avatar
|
||||
========================================================================== */
|
||||
|
||||
.uk-comment-avatar {
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-comment-list-sub-adjacent();
|
||||
}
|
||||
|
||||
|
||||
/* Style modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-comment-primary {
|
||||
.hook-comment-primary();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-misc();
|
||||
|
||||
.hook-comment() {}
|
||||
.hook-comment-body() {}
|
||||
.hook-comment-header() {}
|
||||
.hook-comment-title() {}
|
||||
.hook-comment-meta() {}
|
||||
.hook-comment-avatar() {}
|
||||
.hook-comment-list-adjacent() {}
|
||||
.hook-comment-list-sub() {}
|
||||
.hook-comment-list-sub-adjacent() {}
|
||||
.hook-comment-primary() {}
|
||||
.hook-comment-misc() {}
|
||||
185
client/uikit/src/less/components/container.less
Normal file
185
client/uikit/src/less/components/container.less
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;
|
||||
@container-xsmall-max-width: 750px;
|
||||
@container-small-max-width: 900px;
|
||||
@container-large-max-width: 1400px;
|
||||
@container-xlarge-max-width: 1600px;
|
||||
|
||||
@container-padding-horizontal: 15px;
|
||||
@container-padding-horizontal-s: @global-gutter;
|
||||
@container-padding-horizontal-m: @global-medium-gutter;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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
|
||||
// ========================================================================
|
||||
|
||||
.hook-container-misc();
|
||||
|
||||
.hook-container-misc() {}
|
||||
150
client/uikit/src/less/components/countdown.less
Normal file
150
client/uikit/src/less/components/countdown.less
Normal file
@@ -0,0 +1,150 @@
|
||||
// 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;
|
||||
@countdown-number-font-size: 2rem; // 32px
|
||||
@countdown-number-font-size-s: 4rem; // 64px
|
||||
@countdown-number-font-size-m: 6rem; // 96px
|
||||
|
||||
@countdown-separator-line-height: 1.6;
|
||||
@countdown-separator-font-size: 1rem; // 16px
|
||||
@countdown-separator-font-size-s: 2rem; // 32px
|
||||
@countdown-separator-font-size-m: 3rem; // 48px
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Countdown
|
||||
========================================================================== */
|
||||
|
||||
.uk-countdown {
|
||||
.hook-countdown();
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
========================================================================== */
|
||||
|
||||
.uk-countdown-number,
|
||||
.uk-countdown-separator {
|
||||
.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;
|
||||
.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;
|
||||
.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 {
|
||||
.hook-countdown-label();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-misc();
|
||||
|
||||
.hook-countdown() {}
|
||||
.hook-countdown-item() {}
|
||||
.hook-countdown-number() {}
|
||||
.hook-countdown-separator() {}
|
||||
.hook-countdown-label() {}
|
||||
.hook-countdown-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-countdown-number,
|
||||
.uk-countdown-separator {
|
||||
.hook-inverse-countdown-item();
|
||||
}
|
||||
|
||||
.uk-countdown-number {
|
||||
.hook-inverse-countdown-number();
|
||||
}
|
||||
|
||||
.uk-countdown-separator {
|
||||
.hook-inverse-countdown-separator();
|
||||
}
|
||||
|
||||
.uk-countdown-label {
|
||||
.hook-inverse-countdown-label();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-countdown-item() {}
|
||||
.hook-inverse-countdown-number() {}
|
||||
.hook-inverse-countdown-separator() {}
|
||||
.hook-inverse-countdown-label() {}
|
||||
63
client/uikit/src/less/components/cover.less
Normal file
63
client/uikit/src/less/components/cover.less
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-cover-misc();
|
||||
|
||||
.hook-cover-misc() {}
|
||||
71
client/uikit/src/less/components/description-list.less
Normal file
71
client/uikit/src/less/components/description-list.less
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;
|
||||
@description-list-term-margin-top: @global-margin;
|
||||
|
||||
@description-list-divider-term-margin-top: @global-margin;
|
||||
@description-list-divider-term-border-width: @global-border-width;
|
||||
@description-list-divider-term-border: @global-border;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Description list
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Term
|
||||
*/
|
||||
|
||||
.uk-description-list > dt {
|
||||
color: @description-list-term-color;
|
||||
.hook-description-list-term();
|
||||
}
|
||||
|
||||
.uk-description-list > dt:nth-child(n+2) {
|
||||
margin-top: @description-list-term-margin-top;
|
||||
}
|
||||
|
||||
/*
|
||||
* Description
|
||||
*/
|
||||
|
||||
.uk-description-list > dd {
|
||||
.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;
|
||||
.hook-description-list-divider-term();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-description-list-misc();
|
||||
|
||||
.hook-description-list-term() {}
|
||||
.hook-description-list-description() {}
|
||||
.hook-description-list-divider-term() {}
|
||||
.hook-description-list-misc() {}
|
||||
176
client/uikit/src/less/components/divider.less
Normal file
176
client/uikit/src/less/components/divider.less
Normal file
@@ -0,0 +1,176 @@
|
||||
// Name: Divider
|
||||
// Description: Styles for dividers
|
||||
//
|
||||
// Component: `uk-divider-icon`
|
||||
// `uk-divider-small`
|
||||
// `uk-divider-vertical`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@divider-margin-vertical: @global-margin;
|
||||
|
||||
@divider-icon-width: 50px;
|
||||
@divider-icon-height: 20px;
|
||||
@divider-icon-color: @global-border;
|
||||
@divider-icon-line-top: 50%;
|
||||
@divider-icon-line-width: 100%;
|
||||
@divider-icon-line-border-width: @global-border-width;
|
||||
@divider-icon-line-border: @global-border;
|
||||
|
||||
@internal-divider-icon-image: "../../images/backgrounds/divider-icon.svg";
|
||||
|
||||
@divider-small-width: 100px;
|
||||
@divider-small-border-width: @global-border-width;
|
||||
@divider-small-border: @global-border;
|
||||
|
||||
@divider-vertical-height: 100px;
|
||||
@divider-vertical-border-width: @global-border-width;
|
||||
@divider-vertical-border: @global-border;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.svg-fill(@internal-divider-icon-image, "#000", @divider-icon-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
.hook-divider-icon();
|
||||
}
|
||||
|
||||
.uk-divider-icon::before,
|
||||
.uk-divider-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: @divider-icon-line-top;
|
||||
max-width: ~'calc(50% - (@{divider-icon-width} / 2))';
|
||||
border-bottom: @divider-icon-line-border-width solid @divider-icon-line-border;
|
||||
.hook-divider-icon-line();
|
||||
}
|
||||
|
||||
.uk-divider-icon::before {
|
||||
right: ~'calc(50% + (@{divider-icon-width} / 2))';
|
||||
width: @divider-icon-line-width;
|
||||
.hook-divider-icon-line-left();
|
||||
}
|
||||
|
||||
.uk-divider-icon::after {
|
||||
left: ~'calc(50% + (@{divider-icon-width} / 2))';
|
||||
width: @divider-icon-line-width;
|
||||
.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;
|
||||
.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;
|
||||
.hook-divider-vertical();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-divider-misc();
|
||||
|
||||
.hook-divider-icon() {}
|
||||
.hook-divider-icon-line() {}
|
||||
.hook-divider-icon-line-left() {}
|
||||
.hook-divider-icon-line-right() {}
|
||||
.hook-divider-small() {}
|
||||
.hook-divider-vertical() {}
|
||||
.hook-divider-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-divider-icon-color: @inverse-global-border;
|
||||
@inverse-divider-icon-line-border: @inverse-global-border;
|
||||
@inverse-divider-small-border: @inverse-global-border;
|
||||
@inverse-divider-vertical-border: @inverse-global-border;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-divider-icon {
|
||||
.svg-fill(@internal-divider-icon-image, "#000", @inverse-divider-icon-color);
|
||||
.hook-inverse-divider-icon();
|
||||
}
|
||||
|
||||
.uk-divider-icon::before,
|
||||
.uk-divider-icon::after {
|
||||
border-bottom-color: @inverse-divider-icon-line-border;
|
||||
.hook-inverse-divider-icon-line();
|
||||
}
|
||||
|
||||
.uk-divider-small::after {
|
||||
border-top-color: @inverse-divider-small-border;
|
||||
.hook-inverse-divider-small();
|
||||
}
|
||||
|
||||
.uk-divider-vertical {
|
||||
border-left-color: @inverse-divider-vertical-border;
|
||||
.hook-inverse-divider-vertical();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-divider-icon() {}
|
||||
.hook-inverse-divider-icon-line() {}
|
||||
.hook-inverse-divider-small() {}
|
||||
.hook-inverse-divider-vertical() {}
|
||||
177
client/uikit/src/less/components/dotnav.less
Normal file
177
client/uikit/src/less/components/dotnav.less
Normal file
@@ -0,0 +1,177 @@
|
||||
// Name: Dotnav
|
||||
// Description: Component to create dot navigations
|
||||
//
|
||||
// Component: `uk-dotnav`
|
||||
//
|
||||
// Modifier: `uk-dotnav-vertical`
|
||||
//
|
||||
// States: `uk-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@dotnav-margin-horizontal: 12px;
|
||||
@dotnav-margin-vertical: @dotnav-margin-horizontal;
|
||||
|
||||
@dotnav-item-width: 10px;
|
||||
@dotnav-item-height: @dotnav-item-width;
|
||||
@dotnav-item-border-radius: 50%;
|
||||
|
||||
@dotnav-item-background: fade(@global-color, 20%);
|
||||
@dotnav-item-hover-background: fade(@global-color, 60%);
|
||||
@dotnav-item-onclick-background: fade(@global-color, 20%);
|
||||
@dotnav-item-active-background: fade(@global-color, 60%);
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-dotnav-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-dotnav > * > :hover {
|
||||
background-color: @dotnav-item-hover-background;
|
||||
.hook-dotnav-item-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-dotnav > * > :active {
|
||||
background-color: @dotnav-item-onclick-background;
|
||||
.hook-dotnav-item-onclick();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-dotnav > .uk-active > * {
|
||||
background-color: @dotnav-item-active-background;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-dotnav-misc();
|
||||
|
||||
.hook-dotnav() {}
|
||||
.hook-dotnav-item() {}
|
||||
.hook-dotnav-item-hover() {}
|
||||
.hook-dotnav-item-onclick() {}
|
||||
.hook-dotnav-item-active() {}
|
||||
.hook-dotnav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-dotnav-item-background: fade(@inverse-global-color, 50%);
|
||||
@inverse-dotnav-item-hover-background: fade(@inverse-global-color, 90%);
|
||||
@inverse-dotnav-item-onclick-background: fade(@inverse-global-color, 50%);
|
||||
@inverse-dotnav-item-active-background: fade(@inverse-global-color, 90%);
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-dotnav > * > * {
|
||||
background-color: @inverse-dotnav-item-background;
|
||||
.hook-inverse-dotnav-item();
|
||||
}
|
||||
|
||||
.uk-dotnav > * > :hover {
|
||||
background-color: @inverse-dotnav-item-hover-background;
|
||||
.hook-inverse-dotnav-item-hover();
|
||||
}
|
||||
|
||||
.uk-dotnav > * > :active {
|
||||
background-color: @inverse-dotnav-item-onclick-background;
|
||||
.hook-inverse-dotnav-item-onclick();
|
||||
}
|
||||
|
||||
.uk-dotnav > .uk-active > * {
|
||||
background-color: @inverse-dotnav-item-active-background;
|
||||
.hook-inverse-dotnav-item-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-dotnav-item() {}
|
||||
.hook-inverse-dotnav-item-hover() {}
|
||||
.hook-inverse-dotnav-item-onclick() {}
|
||||
.hook-inverse-dotnav-item-active() {}
|
||||
74
client/uikit/src/less/components/drop.less
Normal file
74
client/uikit/src/less/components/drop.less
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;
|
||||
@drop-width: 300px;
|
||||
@drop-margin: @global-margin;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-drop-misc();
|
||||
|
||||
.hook-drop-misc() {}
|
||||
151
client/uikit/src/less/components/dropdown.less
Normal file
151
client/uikit/src/less/components/dropdown.less
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;
|
||||
@dropdown-min-width: 200px;
|
||||
@dropdown-padding: 15px;
|
||||
@dropdown-background: @global-muted-background;
|
||||
@dropdown-color: @global-color;
|
||||
@dropdown-margin: @global-small-margin;
|
||||
|
||||
@dropdown-nav-item-color: @global-muted-color;
|
||||
@dropdown-nav-item-hover-color: @global-color;
|
||||
@dropdown-nav-header-color: @global-emphasis-color;
|
||||
@dropdown-nav-divider-border-width: @global-border-width;
|
||||
@dropdown-nav-divider-border: @global-border;
|
||||
@dropdown-nav-sublist-item-color: @global-muted-color;
|
||||
@dropdown-nav-sublist-item-hover-color: @global-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-dropdown();
|
||||
}
|
||||
|
||||
/* Show */
|
||||
.uk-dropdown.uk-open { display: block; }
|
||||
|
||||
|
||||
/* Nav
|
||||
* Adopts `uk-nav`
|
||||
========================================================================== */
|
||||
|
||||
.uk-dropdown-nav {
|
||||
white-space: nowrap;
|
||||
.hook-dropdown-nav();
|
||||
}
|
||||
|
||||
/*
|
||||
* Items
|
||||
*/
|
||||
|
||||
.uk-dropdown-nav > li > a {
|
||||
color: @dropdown-nav-item-color;
|
||||
.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;
|
||||
.hook-dropdown-nav-item-hover();
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.uk-dropdown-nav .uk-nav-header {
|
||||
color: @dropdown-nav-header-color;
|
||||
.hook-dropdown-nav-header();
|
||||
}
|
||||
|
||||
/*
|
||||
* Divider
|
||||
*/
|
||||
|
||||
.uk-dropdown-nav .uk-nav-divider {
|
||||
border-top: @dropdown-nav-divider-border-width solid @dropdown-nav-divider-border;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-dropdown-misc();
|
||||
|
||||
.hook-dropdown() {}
|
||||
.hook-dropdown-nav() {}
|
||||
.hook-dropdown-nav-item() {}
|
||||
.hook-dropdown-nav-item-hover() {}
|
||||
.hook-dropdown-nav-header() {}
|
||||
.hook-dropdown-nav-divider() {}
|
||||
.hook-dropdown-misc() {}
|
||||
209
client/uikit/src/less/components/flex.less
Normal file
209
client/uikit/src/less/components/flex.less
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-flex-misc();
|
||||
|
||||
.hook-flex-misc() {}
|
||||
186
client/uikit/src/less/components/form-range.less
Normal file
186
client/uikit/src/less/components/form-range.less
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;
|
||||
@form-range-thumb-width: @form-range-thumb-height;
|
||||
@form-range-thumb-border-radius: 500px;
|
||||
@form-range-thumb-background: @global-color;
|
||||
|
||||
@form-range-track-height: 3px;
|
||||
@form-range-track-background: darken(@global-muted-background, 5%);
|
||||
@form-range-track-focus-background: darken(@form-range-track-background, 5%);
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-form-range();
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-range:focus { outline: none; }
|
||||
.uk-range::-moz-focus-outer { border: none; }
|
||||
|
||||
/* IE11 Reset */
|
||||
.uk-range::-ms-track {
|
||||
height: @form-range-thumb-height;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves consistency of cursor style for clickable elements
|
||||
*/
|
||||
|
||||
.uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
|
||||
.uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
|
||||
.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; }
|
||||
|
||||
|
||||
/* Thumb
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Reset
|
||||
* 2. Style
|
||||
*/
|
||||
|
||||
/* Webkit */
|
||||
.uk-range::-webkit-slider-thumb {
|
||||
/* 1 */
|
||||
-webkit-appearance: none;
|
||||
margin-top: (floor((@form-range-thumb-height / 2)) * -1);
|
||||
/* 2 */
|
||||
height: @form-range-thumb-height;
|
||||
width: @form-range-thumb-width;
|
||||
border-radius: @form-range-thumb-border-radius;
|
||||
background: @form-range-thumb-background;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-form-range-track-focus();
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.uk-range::-moz-range-track {
|
||||
height: @form-range-track-height;
|
||||
background: @form-range-track-background;
|
||||
.hook-form-range-track();
|
||||
}
|
||||
|
||||
.uk-range:focus::-moz-range-track {
|
||||
background: @form-range-track-focus-background;
|
||||
.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;
|
||||
.hook-form-range-track();
|
||||
}
|
||||
|
||||
.uk-range:focus::-ms-fill-lower,
|
||||
.uk-range:focus::-ms-fill-upper {
|
||||
background: @form-range-track-focus-background;
|
||||
.hook-form-range-track-focus();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-range-misc();
|
||||
|
||||
.hook-form-range() {}
|
||||
.hook-form-range-thumb() {}
|
||||
.hook-form-range-track() {}
|
||||
.hook-form-range-track-focus() {}
|
||||
.hook-form-range-misc() {}
|
||||
898
client/uikit/src/less/components/form.less
Normal file
898
client/uikit/src/less/components/form.less
Normal file
@@ -0,0 +1,898 @@
|
||||
// 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;
|
||||
@form-line-height: @form-height;
|
||||
@form-padding-horizontal: 10px;
|
||||
@form-padding-vertical: round(@form-padding-horizontal * 0.6);
|
||||
|
||||
@form-background: @global-muted-background;
|
||||
@form-color: @global-color;
|
||||
|
||||
@form-focus-background: darken(@form-background, 5%);
|
||||
@form-focus-color: @global-color;
|
||||
|
||||
@form-disabled-background: @global-muted-background;
|
||||
@form-disabled-color: @global-muted-color;
|
||||
|
||||
@form-placeholder-color: @global-muted-color;
|
||||
|
||||
@form-small-height: @global-control-small-height;
|
||||
@form-small-padding-horizontal: 8px;
|
||||
@form-small-padding-vertical: round(@form-small-padding-horizontal * 0.6);
|
||||
@form-small-line-height: @form-small-height;
|
||||
@form-small-font-size: @global-small-font-size;
|
||||
|
||||
@form-large-height: @global-control-large-height;
|
||||
@form-large-padding-horizontal: 12px;
|
||||
@form-large-padding-vertical: round(@form-large-padding-horizontal * 0.6);
|
||||
@form-large-line-height: @form-large-height;
|
||||
@form-large-font-size: @global-medium-font-size;
|
||||
|
||||
@form-danger-color: @global-danger-background;
|
||||
@form-success-color: @global-success-background;
|
||||
|
||||
@form-width-xsmall: 50px;
|
||||
@form-width-small: 130px;
|
||||
@form-width-medium: 200px;
|
||||
@form-width-large: 500px;
|
||||
|
||||
@form-select-padding-right: 20px;
|
||||
@form-select-icon-color: @global-color;
|
||||
@form-select-option-color: @global-color;
|
||||
@form-select-disabled-icon-color: @global-muted-color;
|
||||
|
||||
@form-datalist-padding-right: 20px;
|
||||
@form-datalist-icon-color: @global-color;
|
||||
|
||||
@form-radio-size: 16px;
|
||||
@form-radio-margin-top: -4px;
|
||||
@form-radio-background: darken(@global-muted-background, 5%);
|
||||
|
||||
@form-radio-focus-background: darken(@form-radio-background, 5%);
|
||||
|
||||
@form-radio-checked-background: @global-primary-background;
|
||||
@form-radio-checked-icon-color: @global-inverse-color;
|
||||
|
||||
@form-radio-checked-focus-background: darken(@global-primary-background, 10%);
|
||||
|
||||
@form-radio-disabled-background: @global-muted-background;
|
||||
@form-radio-disabled-icon-color: @global-muted-color;
|
||||
|
||||
@form-legend-font-size: @global-large-font-size;
|
||||
@form-legend-line-height: 1.4;
|
||||
|
||||
@form-stacked-margin-bottom: @global-small-margin;
|
||||
|
||||
@form-horizontal-label-width: 200px;
|
||||
@form-horizontal-label-margin-top: 7px;
|
||||
@form-horizontal-controls-margin-left: 215px;
|
||||
@form-horizontal-controls-text-padding-top: 7px;
|
||||
|
||||
@form-icon-width: @form-height;
|
||||
@form-icon-color: @global-muted-color;
|
||||
@form-icon-hover-color: @global-color;
|
||||
|
||||
@internal-form-select-image: "../../images/backgrounds/form-select.svg";
|
||||
@internal-form-datalist-image: "../../images/backgrounds/form-datalist.svg";
|
||||
@internal-form-radio-image: "../../images/backgrounds/form-radio.svg";
|
||||
@internal-form-checkbox-image: "../../images/backgrounds/form-checkbox.svg";
|
||||
@internal-form-checkbox-indeterminate-image: "../../images/backgrounds/form-checkbox-indeterminate.svg";
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-form-focus();
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.uk-input:disabled,
|
||||
.uk-select:disabled,
|
||||
.uk-textarea:disabled {
|
||||
background-color: @form-disabled-background;
|
||||
color: @form-disabled-color;
|
||||
.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;
|
||||
.hook-form-danger();
|
||||
}
|
||||
|
||||
/*
|
||||
* Success
|
||||
*/
|
||||
|
||||
.uk-form-success,
|
||||
.uk-form-success:focus {
|
||||
color: @form-success-color;
|
||||
.hook-form-success();
|
||||
}
|
||||
|
||||
/*
|
||||
* Blank
|
||||
*/
|
||||
|
||||
.uk-form-blank {
|
||||
background: none;
|
||||
.hook-form-blank();
|
||||
}
|
||||
|
||||
.uk-form-blank:focus {
|
||||
.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;
|
||||
.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 { .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 { .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%;
|
||||
.hook-form-radio();
|
||||
}
|
||||
|
||||
.uk-radio { border-radius: 50%; }
|
||||
|
||||
/* Focus */
|
||||
.uk-radio:focus,
|
||||
.uk-checkbox:focus {
|
||||
background-color: @form-radio-focus-background;
|
||||
outline: none;
|
||||
.hook-form-radio-focus();
|
||||
}
|
||||
|
||||
/*
|
||||
* Checked
|
||||
*/
|
||||
|
||||
.uk-radio:checked,
|
||||
.uk-checkbox:checked,
|
||||
.uk-checkbox:indeterminate {
|
||||
background-color: @form-radio-checked-background;
|
||||
.hook-form-radio-checked();
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-radio:checked:focus,
|
||||
.uk-checkbox:checked:focus,
|
||||
.uk-checkbox:indeterminate:focus {
|
||||
background-color: @form-radio-checked-focus-background;
|
||||
.hook-form-radio-checked-focus();
|
||||
}
|
||||
|
||||
/*
|
||||
* Icons
|
||||
*/
|
||||
|
||||
.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-checked-icon-color); }
|
||||
.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-checked-icon-color); }
|
||||
.uk-checkbox:indeterminate { .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;
|
||||
.hook-form-radio-disabled();
|
||||
}
|
||||
|
||||
.uk-radio:disabled:checked { .svg-fill(@internal-form-radio-image, "#000", @form-radio-disabled-icon-color); }
|
||||
.uk-checkbox:disabled:checked { .svg-fill(@internal-form-checkbox-image, "#000", @form-radio-disabled-icon-color); }
|
||||
.uk-checkbox:disabled:indeterminate { .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;
|
||||
.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 {
|
||||
.hook-form-label();
|
||||
}
|
||||
|
||||
|
||||
/* Layout
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Stacked
|
||||
*/
|
||||
|
||||
.uk-form-stacked .uk-form-label {
|
||||
display: block;
|
||||
margin-bottom: @form-stacked-margin-bottom;
|
||||
.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;
|
||||
.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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-misc();
|
||||
|
||||
.hook-form() {}
|
||||
.hook-form-single-line() {}
|
||||
.hook-form-multi-line() {}
|
||||
.hook-form-focus() {}
|
||||
.hook-form-disabled() {}
|
||||
.hook-form-danger() {}
|
||||
.hook-form-success() {}
|
||||
.hook-form-blank() {}
|
||||
.hook-form-blank-focus() {}
|
||||
.hook-form-radio() {}
|
||||
.hook-form-radio-focus() {}
|
||||
.hook-form-radio-checked() {}
|
||||
.hook-form-radio-checked-focus() {}
|
||||
.hook-form-radio-disabled() {}
|
||||
.hook-form-legend() {}
|
||||
.hook-form-label() {}
|
||||
.hook-form-stacked-label() {}
|
||||
.hook-form-horizontal-label() {}
|
||||
.hook-form-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-form-background: @inverse-global-muted-background;
|
||||
@inverse-form-color: @inverse-global-color;
|
||||
@inverse-form-focus-background: fadein(@inverse-form-background, 5%);
|
||||
@inverse-form-focus-color: @inverse-global-color;
|
||||
@inverse-form-placeholder-color: @inverse-global-muted-color;
|
||||
|
||||
@inverse-form-select-icon-color: @inverse-global-color;
|
||||
|
||||
@inverse-form-datalist-icon-color: @inverse-global-color;
|
||||
|
||||
@inverse-form-radio-background: @inverse-global-muted-background;
|
||||
|
||||
@inverse-form-radio-focus-background: fadein(@inverse-form-radio-background, 5%);
|
||||
|
||||
@inverse-form-radio-checked-background: @inverse-global-primary-background;
|
||||
@inverse-form-radio-checked-icon-color: @inverse-global-inverse-color;
|
||||
|
||||
@inverse-form-radio-checked-focus-background: fadein(@inverse-global-primary-background, 10%);
|
||||
|
||||
@inverse-form-icon-color: @inverse-global-muted-color;
|
||||
@inverse-form-icon-hover-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-input,
|
||||
.uk-select,
|
||||
.uk-textarea {
|
||||
background-color: @inverse-form-background;
|
||||
color: @inverse-form-color;
|
||||
background-clip: padding-box;
|
||||
.hook-inverse-form();
|
||||
|
||||
&:focus {
|
||||
background-color: @inverse-form-focus-background;
|
||||
color: @inverse-form-focus-color;
|
||||
.hook-inverse-form-focus();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Placeholder
|
||||
//
|
||||
|
||||
.uk-input::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
|
||||
.uk-input::placeholder { color: @inverse-form-placeholder-color; }
|
||||
|
||||
.uk-textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
|
||||
.uk-textarea::placeholder { color: @inverse-form-placeholder-color; }
|
||||
|
||||
//
|
||||
// Select
|
||||
//
|
||||
|
||||
.uk-select:not([multiple]):not([size]) { .svg-fill(@internal-form-select-image, "#000", @inverse-form-select-icon-color); }
|
||||
|
||||
//
|
||||
// Datalist
|
||||
//
|
||||
|
||||
.uk-input[list]:hover,
|
||||
.uk-input[list]:focus { .svg-fill(@internal-form-datalist-image, "#000", @inverse-form-datalist-icon-color); }
|
||||
|
||||
//
|
||||
// Radio and checkbox
|
||||
//
|
||||
|
||||
.uk-radio,
|
||||
.uk-checkbox {
|
||||
background-color: @inverse-form-radio-background;
|
||||
.hook-inverse-form-radio();
|
||||
}
|
||||
|
||||
// Focus
|
||||
.uk-radio:focus,
|
||||
.uk-checkbox:focus {
|
||||
background-color: @inverse-form-radio-focus-background;
|
||||
.hook-inverse-form-radio-focus();
|
||||
}
|
||||
|
||||
// Checked
|
||||
.uk-radio:checked,
|
||||
.uk-checkbox:checked,
|
||||
.uk-checkbox:indeterminate {
|
||||
background-color: @inverse-form-radio-checked-background;
|
||||
.hook-inverse-form-radio-checked();
|
||||
}
|
||||
|
||||
// Focus
|
||||
.uk-radio:checked:focus,
|
||||
.uk-checkbox:checked:focus,
|
||||
.uk-checkbox:indeterminate:focus {
|
||||
background-color: @inverse-form-radio-checked-focus-background;
|
||||
.hook-inverse-form-radio-checked-focus();
|
||||
}
|
||||
|
||||
// Icon
|
||||
.uk-radio:checked { .svg-fill(@internal-form-radio-image, "#000", @inverse-form-radio-checked-icon-color); }
|
||||
.uk-checkbox:checked { .svg-fill(@internal-form-checkbox-image, "#000", @inverse-form-radio-checked-icon-color); }
|
||||
.uk-checkbox:indeterminate { .svg-fill(@internal-form-checkbox-indeterminate-image, "#000", @inverse-form-radio-checked-icon-color); }
|
||||
|
||||
// Label
|
||||
.uk-form-label {
|
||||
.hook-inverse-form-label();
|
||||
}
|
||||
|
||||
// Icon
|
||||
.uk-form-icon { color: @inverse-form-icon-color; }
|
||||
.uk-form-icon:hover { color: @inverse-form-icon-hover-color; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-form() {}
|
||||
.hook-inverse-form-focus() {}
|
||||
.hook-inverse-form-radio() {}
|
||||
.hook-inverse-form-radio-focus() {}
|
||||
.hook-inverse-form-radio-checked() {}
|
||||
.hook-inverse-form-radio-checked-focus() {}
|
||||
.hook-inverse-form-label() {}
|
||||
419
client/uikit/src/less/components/grid.less
Normal file
419
client/uikit/src/less/components/grid.less
Normal file
@@ -0,0 +1,419 @@
|
||||
// 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;
|
||||
@grid-gutter-vertical: @grid-gutter-horizontal;
|
||||
@grid-gutter-horizontal-l: @global-medium-gutter;
|
||||
@grid-gutter-vertical-l: @grid-gutter-horizontal-l;
|
||||
|
||||
@grid-small-gutter-horizontal: @global-small-gutter;
|
||||
@grid-small-gutter-vertical: @grid-small-gutter-horizontal;
|
||||
|
||||
@grid-medium-gutter-horizontal: @global-gutter;
|
||||
@grid-medium-gutter-vertical: @grid-medium-gutter-horizontal;
|
||||
|
||||
@grid-large-gutter-horizontal: @global-medium-gutter;
|
||||
@grid-large-gutter-vertical: @grid-large-gutter-horizontal;
|
||||
@grid-large-gutter-horizontal-l: @global-large-gutter;
|
||||
@grid-large-gutter-vertical-l: @grid-large-gutter-horizontal-l;
|
||||
|
||||
@grid-divider-border-width: @global-border-width;
|
||||
@grid-divider-border: @global-border;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-grid-misc();
|
||||
|
||||
.hook-grid-divider-horizontal() {}
|
||||
.hook-grid-divider-vertical() {}
|
||||
.hook-grid-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-grid-divider-border: @inverse-global-border;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-grid-divider > :not(.uk-first-column)::before {
|
||||
border-left-color: @inverse-grid-divider-border;
|
||||
.hook-inverse-grid-divider-horizontal();
|
||||
}
|
||||
|
||||
.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
|
||||
border-top-color: @inverse-grid-divider-border;
|
||||
.hook-inverse-grid-divider-vertical();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-grid-divider-horizontal() {}
|
||||
.hook-inverse-grid-divider-vertical() {}
|
||||
355
client/uikit/src/less/components/heading.less
Normal file
355
client/uikit/src/less/components/heading.less
Normal file
@@ -0,0 +1,355 @@
|
||||
// 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; // 38px 0.73
|
||||
@heading-medium-font-size: @heading-medium-font-size-m * 0.825; // 40px 0.714
|
||||
@heading-large-font-size: @heading-large-font-size-m * 0.85; // 50px 0.78
|
||||
@heading-xlarge-font-size: @heading-large-font-size-m; // 4rem / 64px
|
||||
@heading-2xlarge-font-size: @heading-xlarge-font-size-m; // 6rem / 96px
|
||||
|
||||
@heading-small-font-size-m: @heading-medium-font-size-l * 0.8125; // 3.25rem / 52px
|
||||
@heading-medium-font-size-m: @heading-medium-font-size-l * 0.875; // 3.5rem / 56px
|
||||
@heading-large-font-size-m: @heading-medium-font-size-l; // 4rem / 64px
|
||||
@heading-xlarge-font-size-m: @heading-large-font-size-l; // 6rem / 96px
|
||||
@heading-2xlarge-font-size-m: @heading-xlarge-font-size-l; // 8rem / 128px
|
||||
|
||||
@heading-medium-font-size-l: 4rem; // 64px
|
||||
@heading-large-font-size-l: 6rem; // 96px
|
||||
@heading-xlarge-font-size-l: 8rem; // 128px
|
||||
@heading-2xlarge-font-size-l: 11rem; // 176px
|
||||
|
||||
@heading-small-line-height: 1.2;
|
||||
@heading-medium-line-height: 1.1;
|
||||
@heading-large-line-height: 1.1;
|
||||
@heading-xlarge-line-height: 1;
|
||||
@heading-2xlarge-line-height: 1;
|
||||
|
||||
@heading-divider-padding-bottom: ~'calc(5px + 0.1em)';
|
||||
@heading-divider-border-width: ~'calc(0.2px + 0.05em)';
|
||||
@heading-divider-border: @global-border;
|
||||
|
||||
@heading-bullet-top: ~'calc(-0.1 * 1em)';
|
||||
@heading-bullet-height: ~'calc(4px + 0.7em)';
|
||||
@heading-bullet-margin-right: ~'calc(5px + 0.2em)';
|
||||
@heading-bullet-border-width: ~'calc(5px + 0.1em)';
|
||||
@heading-bullet-border: @global-border;
|
||||
|
||||
@heading-line-top: 50%;
|
||||
@heading-line-height: @heading-line-border-width;
|
||||
@heading-line-width: 2000px;
|
||||
@heading-line-border-width: ~'calc(0.2px + 0.05em)';
|
||||
@heading-line-border: @global-border;
|
||||
@heading-line-margin-horizontal: ~'calc(5px + 0.3em)';
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Heading
|
||||
========================================================================== */
|
||||
|
||||
.uk-heading-small {
|
||||
font-size: @heading-small-font-size;
|
||||
line-height: @heading-small-line-height;
|
||||
.hook-heading-small();
|
||||
}
|
||||
|
||||
.uk-heading-medium {
|
||||
font-size: @heading-medium-font-size;
|
||||
line-height: @heading-medium-line-height;
|
||||
.hook-heading-medium();
|
||||
}
|
||||
|
||||
.uk-heading-large {
|
||||
font-size: @heading-large-font-size;
|
||||
line-height: @heading-large-line-height;
|
||||
.hook-heading-large();
|
||||
}
|
||||
|
||||
.uk-heading-xlarge {
|
||||
font-size: @heading-xlarge-font-size;
|
||||
line-height: @heading-xlarge-line-height;
|
||||
.hook-heading-xlarge();
|
||||
}
|
||||
|
||||
.uk-heading-2xlarge {
|
||||
font-size: @heading-2xlarge-font-size;
|
||||
line-height: @heading-2xlarge-line-height;
|
||||
.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; // 60px
|
||||
@heading-primary-line-height-l: 1.1;
|
||||
|
||||
@heading-primary-font-size-m: @heading-primary-font-size-l * 0.9; // 54px
|
||||
|
||||
@heading-primary-font-size: @heading-primary-font-size-l * 0.8; // 48px
|
||||
@heading-primary-line-height: 1.2;
|
||||
|
||||
.uk-heading-primary when (@deprecated = true) {
|
||||
font-size: @heading-primary-font-size;
|
||||
line-height: @heading-primary-line-height;
|
||||
.hook-heading-primary();
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: @breakpoint-medium) {
|
||||
|
||||
.uk-heading-primary when (@deprecated = true) { font-size: @heading-primary-font-size-m; }
|
||||
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-heading-primary when (@deprecated = true) {
|
||||
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; // 128px
|
||||
@heading-hero-line-height-l: 1;
|
||||
|
||||
@heading-hero-font-size-m: @heading-hero-font-size-l * 0.75; // 96px
|
||||
@heading-hero-line-height-m: 1;
|
||||
|
||||
@heading-hero-font-size: @heading-hero-font-size-l * 0.5; // 64px
|
||||
@heading-hero-line-height: 1.1;
|
||||
|
||||
.uk-heading-hero when (@deprecated = true) {
|
||||
font-size: @heading-hero-font-size;
|
||||
line-height: @heading-hero-line-height;
|
||||
.hook-heading-hero();
|
||||
}
|
||||
|
||||
/* Tablet landscape and bigger */
|
||||
@media (min-width: @breakpoint-medium) {
|
||||
|
||||
.uk-heading-hero when (@deprecated = true) {
|
||||
font-size: @heading-hero-font-size-m;
|
||||
line-height: @heading-hero-line-height-m;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-heading-hero when (@deprecated = true) {
|
||||
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;
|
||||
.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;
|
||||
.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: ~'calc(@{heading-line-top} - (@{heading-line-height} / 2))';
|
||||
/* 2 */
|
||||
width: @heading-line-width;
|
||||
/* 3 */
|
||||
border-bottom: @heading-line-border-width solid @heading-line-border;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-heading-misc();
|
||||
|
||||
.hook-heading-small() {}
|
||||
.hook-heading-medium() {}
|
||||
.hook-heading-large() {}
|
||||
.hook-heading-xlarge() {}
|
||||
.hook-heading-2xlarge() {}
|
||||
.hook-heading-primary() {}
|
||||
.hook-heading-hero() {}
|
||||
.hook-heading-divider() {}
|
||||
.hook-heading-bullet() {}
|
||||
.hook-heading-line() {}
|
||||
.hook-heading-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-heading-divider-border: @inverse-global-border;
|
||||
@inverse-heading-bullet-border: @inverse-global-border;
|
||||
@inverse-heading-line-border: @inverse-global-border;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-heading-small {
|
||||
.hook-inverse-heading-small();
|
||||
}
|
||||
|
||||
.uk-heading-medium {
|
||||
.hook-inverse-heading-medium();
|
||||
}
|
||||
|
||||
.uk-heading-large {
|
||||
.hook-inverse-heading-large();
|
||||
}
|
||||
|
||||
.uk-heading-xlarge {
|
||||
.hook-inverse-heading-xlarge();
|
||||
}
|
||||
|
||||
.uk-heading-2xlarge {
|
||||
.hook-inverse-heading-2xlarge();
|
||||
}
|
||||
|
||||
.uk-heading-primary when (@deprecated = true) {
|
||||
.hook-inverse-heading-primary();
|
||||
}
|
||||
|
||||
.uk-heading-hero when (@deprecated = true) {
|
||||
.hook-inverse-heading-hero();
|
||||
}
|
||||
|
||||
.uk-heading-divider {
|
||||
border-bottom-color: @inverse-heading-divider-border;
|
||||
.hook-inverse-heading-divider();
|
||||
}
|
||||
|
||||
.uk-heading-bullet::before {
|
||||
border-left-color: @inverse-heading-bullet-border;
|
||||
.hook-inverse-heading-bullet();
|
||||
}
|
||||
|
||||
.uk-heading-line > ::before,
|
||||
.uk-heading-line > ::after {
|
||||
border-bottom-color: @inverse-heading-line-border;
|
||||
.hook-inverse-heading-line();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-heading-small() {}
|
||||
.hook-inverse-heading-medium() {}
|
||||
.hook-inverse-heading-large() {}
|
||||
.hook-inverse-heading-xlarge() {}
|
||||
.hook-inverse-heading-2xlarge() {}
|
||||
.hook-inverse-heading-primary() {}
|
||||
.hook-inverse-heading-hero() {}
|
||||
.hook-inverse-heading-divider() {}
|
||||
.hook-inverse-heading-bullet() {}
|
||||
.hook-inverse-heading-line() {}
|
||||
54
client/uikit/src/less/components/height.less
Normal file
54
client/uikit/src/less/components/height.less
Normal file
@@ -0,0 +1,54 @@
|
||||
// Name: Height
|
||||
// Description: Utilities for heights
|
||||
//
|
||||
// Component: `uk-height-*`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@height-small-height: 150px;
|
||||
@height-medium-height: 300px;
|
||||
@height-large-height: 450px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-height-misc();
|
||||
|
||||
.hook-height-misc() {}
|
||||
260
client/uikit/src/less/components/icon.less
Normal file
260
client/uikit/src/less/components/icon.less
Normal file
@@ -0,0 +1,260 @@
|
||||
// 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;
|
||||
|
||||
@icon-link-color: @global-muted-color;
|
||||
@icon-link-hover-color: @global-color;
|
||||
@icon-link-active-color: darken(@global-color, 5%);
|
||||
|
||||
@icon-button-size: 36px;
|
||||
@icon-button-border-radius: 500px;
|
||||
@icon-button-background: @global-muted-background;
|
||||
@icon-button-color: @global-muted-color;
|
||||
|
||||
@icon-button-hover-background: darken(@icon-button-background, 5%);
|
||||
@icon-button-hover-color: @global-color;
|
||||
|
||||
@icon-button-active-background: darken(@icon-button-background, 10%);
|
||||
@icon-button-active-color: @global-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-icon-link();
|
||||
}
|
||||
|
||||
.uk-icon-link:hover {
|
||||
color: @icon-link-hover-color;
|
||||
.hook-icon-link-hover();
|
||||
}
|
||||
|
||||
/* OnClick + Active */
|
||||
.uk-icon-link:active,
|
||||
.uk-active > .uk-icon-link {
|
||||
color: @icon-link-active-color;
|
||||
.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;
|
||||
.hook-icon-button();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-icon-button:hover {
|
||||
background-color: @icon-button-hover-background;
|
||||
color: @icon-button-hover-color;
|
||||
.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;
|
||||
.hook-icon-button-active();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-icon-misc();
|
||||
|
||||
.hook-icon-link() {}
|
||||
.hook-icon-link-hover() {}
|
||||
.hook-icon-link-active() {}
|
||||
.hook-icon-button() {}
|
||||
.hook-icon-button-hover() {}
|
||||
.hook-icon-button-active() {}
|
||||
.hook-icon-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-icon-link-color: @inverse-global-muted-color;
|
||||
@inverse-icon-link-hover-color: @inverse-global-color;
|
||||
@inverse-icon-link-active-color: @inverse-global-color;
|
||||
@inverse-icon-button-background: @inverse-global-muted-background;
|
||||
@inverse-icon-button-color: @inverse-global-muted-color;
|
||||
@inverse-icon-button-hover-background: fadein(@inverse-icon-button-background, 5%);
|
||||
@inverse-icon-button-hover-color: @inverse-global-color;
|
||||
@inverse-icon-button-active-background: fadein(@inverse-icon-button-background, 10%);
|
||||
@inverse-icon-button-active-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
//
|
||||
// Link
|
||||
//
|
||||
|
||||
.uk-icon-link {
|
||||
color: @inverse-icon-link-color;
|
||||
.hook-inverse-icon-link();
|
||||
}
|
||||
|
||||
.uk-icon-link:hover {
|
||||
color: @inverse-icon-link-hover-color;
|
||||
.hook-inverse-icon-link-hover();
|
||||
}
|
||||
|
||||
.uk-icon-link:active,
|
||||
.uk-active > .uk-icon-link {
|
||||
color: @inverse-icon-link-active-color;
|
||||
.hook-inverse-icon-link-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Button
|
||||
//
|
||||
|
||||
.uk-icon-button {
|
||||
background-color: @inverse-icon-button-background;
|
||||
color: @inverse-icon-button-color;
|
||||
.hook-inverse-icon-button();
|
||||
}
|
||||
|
||||
.uk-icon-button:hover {
|
||||
background-color: @inverse-icon-button-hover-background;
|
||||
color: @inverse-icon-button-hover-color;
|
||||
.hook-inverse-icon-button-hover();
|
||||
}
|
||||
|
||||
.uk-icon-button:active {
|
||||
background-color: @inverse-icon-button-active-background;
|
||||
color: @inverse-icon-button-active-color;
|
||||
.hook-inverse-icon-button-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-icon-link() {}
|
||||
.hook-inverse-icon-link-hover() {}
|
||||
.hook-inverse-icon-link-active() {}
|
||||
.hook-inverse-icon-button() {}
|
||||
.hook-inverse-icon-button-hover() {}
|
||||
.hook-inverse-icon-button-active() {}
|
||||
163
client/uikit/src/less/components/iconnav.less
Normal file
163
client/uikit/src/less/components/iconnav.less
Normal file
@@ -0,0 +1,163 @@
|
||||
// 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;
|
||||
@iconnav-margin-vertical: @iconnav-margin-horizontal;
|
||||
|
||||
@iconnav-item-color: @global-muted-color;
|
||||
|
||||
@iconnav-item-hover-color: @global-color;
|
||||
|
||||
@iconnav-item-active-color: @global-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-iconnav-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-iconnav > * > a:hover {
|
||||
color: @iconnav-item-hover-color;
|
||||
.hook-iconnav-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-iconnav > .uk-active > a {
|
||||
color: @iconnav-item-active-color;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-iconnav-misc();
|
||||
|
||||
.hook-iconnav() {}
|
||||
.hook-iconnav-item() {}
|
||||
.hook-iconnav-item-hover() {}
|
||||
.hook-iconnav-item-active() {}
|
||||
.hook-iconnav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-iconnav-item-color: @inverse-global-muted-color;
|
||||
@inverse-iconnav-item-hover-color: @inverse-global-color;
|
||||
@inverse-iconnav-item-active-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-iconnav > * > a {
|
||||
color: @inverse-iconnav-item-color;
|
||||
.hook-inverse-iconnav-item();
|
||||
}
|
||||
|
||||
.uk-iconnav > * > a:hover {
|
||||
color: @inverse-iconnav-item-hover-color;
|
||||
.hook-inverse-iconnav-item-hover();
|
||||
}
|
||||
|
||||
.uk-iconnav > .uk-active > a {
|
||||
color: @inverse-iconnav-item-active-color;
|
||||
.hook-inverse-iconnav-item-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-iconnav-item() {}
|
||||
.hook-inverse-iconnav-item-hover() {}
|
||||
.hook-inverse-iconnav-item-active() {}
|
||||
52
client/uikit/src/less/components/inverse.less
Normal file
52
client/uikit/src/less/components/inverse.less
Normal file
@@ -0,0 +1,52 @@
|
||||
// Name: Inverse
|
||||
// Description: Inverse component style for light or dark backgrounds
|
||||
//
|
||||
// Component: `uk-light`
|
||||
// `uk-dark`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@inverse-global-color-mode: light;
|
||||
|
||||
@inverse-global-color: fade(@global-inverse-color, 70%);
|
||||
@inverse-global-emphasis-color: @global-inverse-color;
|
||||
@inverse-global-muted-color: fade(@global-inverse-color, 50%);
|
||||
@inverse-global-inverse-color: @global-color;
|
||||
|
||||
@inverse-global-primary-background: @global-inverse-color;
|
||||
@inverse-global-muted-background: fade(@global-inverse-color, 10%);
|
||||
|
||||
@inverse-global-border: fade(@global-inverse-color, 20%);
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
*/
|
||||
|
||||
.uk-light when (@inverse-global-color-mode = light) {
|
||||
|
||||
.hook-inverse();
|
||||
|
||||
}
|
||||
|
||||
.uk-dark when (@inverse-global-color-mode = dark) {
|
||||
|
||||
.hook-inverse();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse() {}
|
||||
110
client/uikit/src/less/components/label.less
Normal file
110
client/uikit/src/less/components/label.less
Normal file
@@ -0,0 +1,110 @@
|
||||
// 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;
|
||||
@label-padding-horizontal: @global-small-margin;
|
||||
@label-background: @global-primary-background;
|
||||
@label-line-height: @global-line-height;
|
||||
@label-font-size: @global-small-font-size;
|
||||
@label-color: @global-inverse-color;
|
||||
|
||||
@label-success-background: @global-success-background;
|
||||
@label-success-color: @global-inverse-color;
|
||||
@label-warning-background: @global-warning-background;
|
||||
@label-warning-color: @global-inverse-color;
|
||||
@label-danger-background: @global-danger-background;
|
||||
@label-danger-color: @global-inverse-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-label();
|
||||
}
|
||||
|
||||
|
||||
/* Color modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Success
|
||||
*/
|
||||
|
||||
.uk-label-success {
|
||||
background-color: @label-success-background;
|
||||
color: @label-success-color;
|
||||
.hook-label-success();
|
||||
}
|
||||
|
||||
/*
|
||||
* Warning
|
||||
*/
|
||||
|
||||
.uk-label-warning {
|
||||
background-color: @label-warning-background;
|
||||
color: @label-warning-color;
|
||||
.hook-label-warning();
|
||||
}
|
||||
|
||||
/*
|
||||
* Danger
|
||||
*/
|
||||
|
||||
.uk-label-danger {
|
||||
background-color: @label-danger-background;
|
||||
color: @label-danger-color;
|
||||
.hook-label-danger();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-label-misc();
|
||||
|
||||
.hook-label() {}
|
||||
.hook-label-success() {}
|
||||
.hook-label-warning() {}
|
||||
.hook-label-danger() {}
|
||||
.hook-label-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-label-background: @inverse-global-primary-background;
|
||||
@inverse-label-color: @inverse-global-inverse-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-label {
|
||||
background-color: @inverse-label-background;
|
||||
color: @inverse-label-color;
|
||||
.hook-inverse-label();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-label() {}
|
||||
76
client/uikit/src/less/components/leader.less
Normal file
76
client/uikit/src/less/components/leader.less
Normal file
@@ -0,0 +1,76 @@
|
||||
// Name: Leader
|
||||
// Description: Component to create dot leaders
|
||||
//
|
||||
// Component: `uk-leader`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@leader-fill-content: ~'.';
|
||||
@leader-fill-margin-left: @global-small-gutter;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-leader-misc();
|
||||
|
||||
.hook-leader() {}
|
||||
.hook-leader-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-leader-fill::after {
|
||||
.hook-inverse-leader();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-leader() {}
|
||||
249
client/uikit/src/less/components/lightbox.less
Normal file
249
client/uikit/src/less/components/lightbox.less
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;
|
||||
@lightbox-background: #000;
|
||||
|
||||
@lightbox-focus-outline: rgba(255,255,255,0.7);
|
||||
|
||||
@lightbox-item-color: rgba(255,255,255,0.7);
|
||||
@lightbox-item-max-width: 100vw;
|
||||
@lightbox-item-max-height: 100vh;
|
||||
|
||||
@lightbox-toolbar-padding-vertical: 10px;
|
||||
@lightbox-toolbar-padding-horizontal: 10px;
|
||||
@lightbox-toolbar-background: rgba(0,0,0,0.3);
|
||||
@lightbox-toolbar-color: rgba(255,255,255,0.7);
|
||||
|
||||
@lightbox-toolbar-icon-padding: 5px;
|
||||
@lightbox-toolbar-icon-color: rgba(255,255,255,0.7);
|
||||
|
||||
@lightbox-toolbar-icon-hover-color: #fff;
|
||||
|
||||
@lightbox-button-size: 50px;
|
||||
@lightbox-button-background: @lightbox-toolbar-background;
|
||||
@lightbox-button-color: rgba(255,255,255,0.7);
|
||||
|
||||
@lightbox-button-hover-color: #fff;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-lightbox-toolbar-icon();
|
||||
}
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
|
||||
.uk-lightbox-toolbar-icon:hover {
|
||||
color: @lightbox-toolbar-icon-hover-color;
|
||||
.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;
|
||||
.hook-lightbox-button();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-lightbox-button:hover {
|
||||
color: @lightbox-button-hover-color;
|
||||
.hook-lightbox-button-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-lightbox-button:active {
|
||||
.hook-lightbox-button-active();
|
||||
}
|
||||
|
||||
|
||||
/* Caption
|
||||
========================================================================== */
|
||||
|
||||
.uk-lightbox-caption:empty { display: none; }
|
||||
|
||||
|
||||
/* Iframe
|
||||
========================================================================== */
|
||||
|
||||
.uk-lightbox-iframe {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-lightbox-misc();
|
||||
|
||||
.hook-lightbox() {}
|
||||
.hook-lightbox-item() {}
|
||||
.hook-lightbox-toolbar() {}
|
||||
.hook-lightbox-toolbar-icon() {}
|
||||
.hook-lightbox-toolbar-icon-hover() {}
|
||||
.hook-lightbox-button() {}
|
||||
.hook-lightbox-button-hover() {}
|
||||
.hook-lightbox-button-active() {}
|
||||
.hook-lightbox-misc() {}
|
||||
167
client/uikit/src/less/components/link.less
Normal file
167
client/uikit/src/less/components/link.less
Normal file
@@ -0,0 +1,167 @@
|
||||
// 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;
|
||||
@link-muted-hover-color: @global-color;
|
||||
|
||||
@link-text-hover-color: @global-muted-color;
|
||||
|
||||
@link-heading-hover-color: @global-primary-background;
|
||||
@link-heading-hover-text-decoration: none;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Link
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/* Muted
|
||||
========================================================================== */
|
||||
|
||||
a.uk-link-muted,
|
||||
.uk-link-muted a,
|
||||
.uk-link-toggle .uk-link-muted {
|
||||
color: @link-muted-color;
|
||||
.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;
|
||||
.hook-link-muted-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Text
|
||||
========================================================================== */
|
||||
|
||||
a.uk-link-text,
|
||||
.uk-link-text a,
|
||||
.uk-link-toggle .uk-link-text {
|
||||
color: inherit;
|
||||
.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;
|
||||
.hook-link-text-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Heading
|
||||
========================================================================== */
|
||||
|
||||
a.uk-link-heading,
|
||||
.uk-link-heading a,
|
||||
.uk-link-toggle .uk-link-heading {
|
||||
color: inherit;
|
||||
.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;
|
||||
.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;
|
||||
.hook-link-reset();
|
||||
}
|
||||
|
||||
|
||||
/* Toggle
|
||||
========================================================================== */
|
||||
|
||||
.uk-link-toggle {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-link-misc();
|
||||
|
||||
.hook-link-muted() {}
|
||||
.hook-link-muted-hover() {}
|
||||
.hook-link-text() {}
|
||||
.hook-link-text-hover() {}
|
||||
.hook-link-heading() {}
|
||||
.hook-link-heading-hover() {}
|
||||
.hook-link-reset() {}
|
||||
.hook-link-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-link-muted-color: @inverse-global-muted-color;
|
||||
@inverse-link-muted-hover-color: @inverse-global-color;
|
||||
@inverse-link-text-hover-color: @inverse-global-muted-color;
|
||||
@inverse-link-heading-hover-color: @inverse-global-primary-background;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
a.uk-link-muted,
|
||||
.uk-link-muted a {
|
||||
color: @inverse-link-muted-color;
|
||||
.hook-inverse-link-muted();
|
||||
}
|
||||
|
||||
a.uk-link-muted:hover,
|
||||
.uk-link-muted a:hover,
|
||||
.uk-link-toggle:hover .uk-link-muted {
|
||||
color: @inverse-link-muted-hover-color;
|
||||
.hook-inverse-link-muted-hover();
|
||||
}
|
||||
|
||||
a.uk-link-text:hover,
|
||||
.uk-link-text a:hover,
|
||||
.uk-link-toggle:hover .uk-link-text {
|
||||
color: @inverse-link-text-hover-color;
|
||||
.hook-inverse-link-text-hover();
|
||||
}
|
||||
|
||||
a.uk-link-heading:hover,
|
||||
.uk-link-heading a:hover,
|
||||
.uk-link-toggle:hover .uk-link-heading {
|
||||
color: @inverse-link-heading-hover-color;
|
||||
.hook-inverse-link-heading-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-link-muted() {}
|
||||
.hook-inverse-link-muted-hover() {}
|
||||
.hook-inverse-link-text-hover() {}
|
||||
.hook-inverse-link-heading-hover() {}
|
||||
257
client/uikit/src/less/components/list.less
Normal file
257
client/uikit/src/less/components/list.less
Normal file
@@ -0,0 +1,257 @@
|
||||
// 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;
|
||||
|
||||
@list-padding-left: 30px;
|
||||
|
||||
@list-marker-height: (@global-line-height * 1em);
|
||||
|
||||
@list-muted-color: @global-muted-color;
|
||||
@list-emphasis-color: @global-emphasis-color;
|
||||
@list-primary-color: @global-primary-background;
|
||||
@list-secondary-color: @global-secondary-background;
|
||||
|
||||
@list-bullet-icon-color: @global-color;
|
||||
|
||||
@list-divider-margin-top: @global-small-margin;
|
||||
@list-divider-border-width: @global-border-width;
|
||||
@list-divider-border: @global-border;
|
||||
|
||||
@list-striped-padding-vertical: @global-small-margin;
|
||||
@list-striped-padding-horizontal: @global-small-margin;
|
||||
@list-striped-background: @global-muted-background;
|
||||
|
||||
@list-large-margin-top: @global-margin;
|
||||
@list-large-divider-margin-top: @global-margin;
|
||||
@list-large-striped-padding-vertical: @global-margin;
|
||||
@list-large-striped-padding-horizontal: @global-small-margin;
|
||||
|
||||
@internal-list-bullet-image: "../../images/backgrounds/list-bullet.svg";
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-list-divider();
|
||||
}
|
||||
|
||||
/*
|
||||
* Striped
|
||||
*/
|
||||
|
||||
.uk-list-striped > * {
|
||||
padding: @list-striped-padding-vertical @list-striped-padding-horizontal;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-list-misc();
|
||||
|
||||
.hook-list-divider() {}
|
||||
.hook-list-striped() {}
|
||||
.hook-list-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-list-muted-color: @inverse-global-muted-color;
|
||||
@inverse-list-emphasis-color: @inverse-global-emphasis-color;
|
||||
@inverse-list-primary-color: @inverse-global-primary-background;
|
||||
@inverse-list-secondary-color: @inverse-global-primary-background;
|
||||
|
||||
@inverse-list-divider-border: @inverse-global-border;
|
||||
@inverse-list-striped-background: @inverse-global-muted-background;
|
||||
|
||||
@inverse-list-bullet-icon-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-list-muted > ::before { color: @inverse-list-muted-color !important; }
|
||||
.uk-list-emphasis > ::before { color: @inverse-list-emphasis-color !important; }
|
||||
.uk-list-primary > ::before { color: @inverse-list-primary-color !important; }
|
||||
.uk-list-secondary > ::before { color: @inverse-list-secondary-color !important; }
|
||||
|
||||
.uk-list-bullet > ::before {
|
||||
.svg-fill(@internal-list-bullet-image, "#000", @inverse-list-bullet-icon-color);
|
||||
}
|
||||
|
||||
.uk-list-divider > :nth-child(n+2) {
|
||||
border-top-color: @inverse-list-divider-border;
|
||||
.hook-inverse-list-divider();
|
||||
}
|
||||
|
||||
.uk-list-striped > * {
|
||||
.hook-inverse-list-striped();
|
||||
}
|
||||
|
||||
.uk-list-striped > :nth-of-type(odd) { background-color: @inverse-list-striped-background; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-list-divider() {}
|
||||
.hook-inverse-list-striped() {}
|
||||
250
client/uikit/src/less/components/margin.less
Normal file
250
client/uikit/src/less/components/margin.less
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;
|
||||
|
||||
@margin-small-margin: @global-small-margin;
|
||||
|
||||
@margin-medium-margin: @global-medium-margin;
|
||||
|
||||
@margin-large-margin: @global-medium-margin;
|
||||
@margin-large-margin-l: @global-large-margin;
|
||||
|
||||
@margin-xlarge-margin: @global-large-margin;
|
||||
@margin-xlarge-margin-l: @global-xlarge-margin;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-margin-misc();
|
||||
|
||||
.hook-margin-misc() {}
|
||||
74
client/uikit/src/less/components/marker.less
Normal file
74
client/uikit/src/less/components/marker.less
Normal file
@@ -0,0 +1,74 @@
|
||||
// Name: Marker
|
||||
// Description: Component to create a marker icon
|
||||
//
|
||||
// Component: `uk-marker`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@marker-padding: 5px;
|
||||
@marker-background: @global-secondary-background;
|
||||
@marker-color: @global-inverse-color;
|
||||
|
||||
@marker-hover-color: @global-inverse-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Marker
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-marker {
|
||||
padding: @marker-padding;
|
||||
background: @marker-background;
|
||||
color: @marker-color;
|
||||
.hook-marker();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-marker:hover {
|
||||
color: @marker-hover-color;
|
||||
.hook-marker-hover();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-marker-misc();
|
||||
|
||||
.hook-marker() {}
|
||||
.hook-marker-hover() {}
|
||||
.hook-marker-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-marker-background: @global-muted-background;
|
||||
@inverse-marker-color: @global-color;
|
||||
@inverse-marker-hover-color: @global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-marker {
|
||||
background: @inverse-marker-background;
|
||||
color: @inverse-marker-color;
|
||||
.hook-inverse-marker();
|
||||
}
|
||||
|
||||
.uk-marker:hover {
|
||||
color: @inverse-marker-hover-color;
|
||||
.hook-inverse-marker-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-marker() {}
|
||||
.hook-inverse-marker-hover() {}
|
||||
20
client/uikit/src/less/components/mixin.less
Normal file
20
client/uikit/src/less/components/mixin.less
Normal file
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Component: Mixin
|
||||
// Description: Defines mixins which are used across all components
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// SVG
|
||||
// ========================================================================
|
||||
|
||||
.svg-fill(@src, @color-default, @color-new, @property: background-image) {
|
||||
|
||||
@escape-color-default: escape(@color-default);
|
||||
@escape-color-new: escape("@{color-new}");
|
||||
|
||||
@data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
|
||||
@replace-src: replace("@{data-uri}", "@{escape-color-default}", "@{escape-color-new}", "g");
|
||||
|
||||
@{property}: e(@replace-src);
|
||||
}
|
||||
353
client/uikit/src/less/components/modal.less
Normal file
353
client/uikit/src/less/components/modal.less
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;
|
||||
@modal-background: rgba(0,0,0,0.6);
|
||||
|
||||
@modal-padding-horizontal: 15px;
|
||||
@modal-padding-horizontal-s: @global-gutter;
|
||||
@modal-padding-horizontal-m: @global-medium-gutter;
|
||||
@modal-padding-vertical: @modal-padding-horizontal;
|
||||
@modal-padding-vertical-s: 50px;
|
||||
|
||||
@modal-dialog-width: 600px;
|
||||
@modal-dialog-background: @global-background;
|
||||
|
||||
@modal-container-width: 1200px;
|
||||
|
||||
@modal-body-padding-horizontal: @global-gutter;
|
||||
@modal-body-padding-vertical: @global-gutter;
|
||||
|
||||
@modal-header-padding-horizontal: @global-gutter;
|
||||
@modal-header-padding-vertical: (@modal-header-padding-horizontal / 2);
|
||||
@modal-header-background: @global-muted-background;
|
||||
|
||||
@modal-footer-padding-horizontal: @global-gutter;
|
||||
@modal-footer-padding-vertical: (@modal-footer-padding-horizontal / 2);
|
||||
@modal-footer-background: @global-muted-background;
|
||||
|
||||
@modal-title-font-size: @global-xlarge-font-size;
|
||||
@modal-title-line-height: 1.3;
|
||||
|
||||
@modal-close-position: @global-small-margin;
|
||||
@modal-close-padding: 5px;
|
||||
|
||||
@modal-close-outside-position: 0;
|
||||
@modal-close-outside-translate: 100%;
|
||||
@modal-close-outside-color: lighten(@global-inverse-color, 20%);
|
||||
@modal-close-outside-hover-color: @global-inverse-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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: ~'calc(100% - 0.01px)' !important;
|
||||
/* 4 */
|
||||
background: @modal-dialog-background;
|
||||
/* 5 */
|
||||
opacity: 0;
|
||||
transform: translateY(-100px);
|
||||
transition: 0.3s linear;
|
||||
transition-property: opacity, transform;
|
||||
.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);
|
||||
.hook-modal-full();
|
||||
}
|
||||
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
.uk-modal-body {
|
||||
display: flow-root;
|
||||
padding: @modal-body-padding-vertical @modal-body-padding-horizontal;
|
||||
.hook-modal-body();
|
||||
}
|
||||
|
||||
.uk-modal-header {
|
||||
display: flow-root;
|
||||
padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
|
||||
background: @modal-header-background;
|
||||
.hook-modal-header();
|
||||
}
|
||||
|
||||
.uk-modal-footer {
|
||||
display: flow-root;
|
||||
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
|
||||
background: @modal-footer-background;
|
||||
.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;
|
||||
.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;
|
||||
.hook-modal-close();
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from adjacent element
|
||||
*/
|
||||
|
||||
[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
|
||||
[class*='uk-modal-close-']:hover {
|
||||
.hook-modal-close-hover();
|
||||
}
|
||||
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
|
||||
.uk-modal-close-default {
|
||||
.hook-modal-close-default();
|
||||
}
|
||||
|
||||
.uk-modal-close-default:hover {
|
||||
.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;
|
||||
.hook-modal-close-outside();
|
||||
}
|
||||
|
||||
.uk-modal-close-outside:hover {
|
||||
color: @modal-close-outside-hover-color;
|
||||
.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 {
|
||||
.hook-modal-close-full();
|
||||
}
|
||||
|
||||
.uk-modal-close-full:hover {
|
||||
.hook-modal-close-full-hover();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-modal-misc();
|
||||
|
||||
.hook-modal() {}
|
||||
.hook-modal-dialog() {}
|
||||
.hook-modal-full() {}
|
||||
.hook-modal-header() {}
|
||||
.hook-modal-body() {}
|
||||
.hook-modal-footer() {}
|
||||
.hook-modal-title() {}
|
||||
.hook-modal-close() {}
|
||||
.hook-modal-close-hover() {}
|
||||
.hook-modal-close-default() {}
|
||||
.hook-modal-close-default-hover() {}
|
||||
.hook-modal-close-outside() {}
|
||||
.hook-modal-close-outside-hover() {}
|
||||
.hook-modal-close-full() {}
|
||||
.hook-modal-close-full-hover() {}
|
||||
.hook-modal-misc() {}
|
||||
488
client/uikit/src/less/components/nav.less
Normal file
488
client/uikit/src/less/components/nav.less
Normal file
@@ -0,0 +1,488 @@
|
||||
// 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;
|
||||
@nav-item-padding-horizontal: 0;
|
||||
|
||||
@nav-sublist-padding-vertical: 5px;
|
||||
@nav-sublist-padding-left: 15px;
|
||||
@nav-sublist-deeper-padding-left: 15px;
|
||||
@nav-sublist-item-padding-vertical: 2px;
|
||||
|
||||
@nav-parent-icon-width: (@global-line-height * 1em);
|
||||
@nav-parent-icon-height: @nav-parent-icon-width;
|
||||
@nav-parent-icon-color: @global-color;
|
||||
|
||||
@nav-header-padding-vertical: @nav-item-padding-vertical;
|
||||
@nav-header-padding-horizontal: @nav-item-padding-horizontal;
|
||||
@nav-header-font-size: @global-small-font-size;
|
||||
@nav-header-text-transform: uppercase;
|
||||
@nav-header-margin-top: @global-margin;
|
||||
|
||||
@nav-divider-margin-vertical: 5px;
|
||||
@nav-divider-margin-horizontal: 0;
|
||||
|
||||
@nav-default-item-color: @global-muted-color;
|
||||
@nav-default-item-hover-color: @global-color;
|
||||
@nav-default-item-active-color: @global-emphasis-color;
|
||||
@nav-default-header-color: @global-emphasis-color;
|
||||
@nav-default-divider-border-width: @global-border-width;
|
||||
@nav-default-divider-border: @global-border;
|
||||
@nav-default-sublist-item-color: @global-muted-color;
|
||||
@nav-default-sublist-item-hover-color: @global-color;
|
||||
@nav-default-sublist-item-active-color: @global-emphasis-color;
|
||||
|
||||
@nav-primary-item-font-size: @global-large-font-size;
|
||||
@nav-primary-item-line-height: @global-line-height;
|
||||
@nav-primary-item-color: @global-muted-color;
|
||||
@nav-primary-item-hover-color: @global-color;
|
||||
@nav-primary-item-active-color: @global-emphasis-color;
|
||||
@nav-primary-header-color: @global-emphasis-color;
|
||||
@nav-primary-divider-border-width: @global-border-width;
|
||||
@nav-primary-divider-border: @global-border;
|
||||
@nav-primary-sublist-item-color: @global-muted-color;
|
||||
@nav-primary-sublist-item-hover-color: @global-color;
|
||||
@nav-primary-sublist-item-active-color: @global-emphasis-color;
|
||||
|
||||
@nav-dividers-margin-top: 0;
|
||||
@nav-dividers-border-width: @global-border-width;
|
||||
@nav-dividers-border: @global-border;
|
||||
|
||||
@internal-nav-parent-close-image: "../../images/backgrounds/nav-parent-close.svg";
|
||||
@internal-nav-parent-open-image: "../../images/backgrounds/nav-parent-open.svg";
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.svg-fill(@internal-nav-parent-close-image, "#000", @nav-parent-icon-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
.hook-nav-parent-icon();
|
||||
}
|
||||
|
||||
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { .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;
|
||||
.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;
|
||||
.hook-nav-divider();
|
||||
}
|
||||
|
||||
|
||||
/* Default modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-nav-default {
|
||||
.hook-nav-default();
|
||||
}
|
||||
|
||||
/*
|
||||
* Items
|
||||
*/
|
||||
|
||||
.uk-nav-default > li > a {
|
||||
color: @nav-default-item-color;
|
||||
.hook-nav-default-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-nav-default > li > a:hover {
|
||||
color: @nav-default-item-hover-color;
|
||||
.hook-nav-default-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-nav-default > li.uk-active > a {
|
||||
color: @nav-default-item-active-color;
|
||||
.hook-nav-default-item-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.uk-nav-default .uk-nav-header {
|
||||
color: @nav-default-header-color;
|
||||
.hook-nav-default-header();
|
||||
}
|
||||
|
||||
/*
|
||||
* Divider
|
||||
*/
|
||||
|
||||
.uk-nav-default .uk-nav-divider {
|
||||
border-top: @nav-default-divider-border-width solid @nav-default-divider-border;
|
||||
.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 {
|
||||
.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;
|
||||
.hook-nav-primary-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-nav-primary > li > a:hover {
|
||||
color: @nav-primary-item-hover-color;
|
||||
.hook-nav-primary-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-nav-primary > li.uk-active > a {
|
||||
color: @nav-primary-item-active-color;
|
||||
.hook-nav-primary-item-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.uk-nav-primary .uk-nav-header {
|
||||
color: @nav-primary-header-color;
|
||||
.hook-nav-primary-header();
|
||||
}
|
||||
|
||||
/*
|
||||
* Divider
|
||||
*/
|
||||
|
||||
.uk-nav-primary .uk-nav-divider {
|
||||
border-top: @nav-primary-divider-border-width solid @nav-primary-divider-border;
|
||||
.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;
|
||||
.hook-nav-dividers();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-nav-misc();
|
||||
|
||||
.hook-nav-sub() {}
|
||||
.hook-nav-parent-icon() {}
|
||||
.hook-nav-header() {}
|
||||
.hook-nav-divider() {}
|
||||
.hook-nav-default() {}
|
||||
.hook-nav-default-item() {}
|
||||
.hook-nav-default-item-hover() {}
|
||||
.hook-nav-default-item-active() {}
|
||||
.hook-nav-default-header() {}
|
||||
.hook-nav-default-divider() {}
|
||||
.hook-nav-primary() {}
|
||||
.hook-nav-primary-item() {}
|
||||
.hook-nav-primary-item-hover() {}
|
||||
.hook-nav-primary-item-active() {}
|
||||
.hook-nav-primary-header() {}
|
||||
.hook-nav-primary-divider() {}
|
||||
.hook-nav-dividers() {}
|
||||
.hook-nav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-nav-parent-icon-color: @inverse-global-color;
|
||||
@inverse-nav-default-item-color: @inverse-global-muted-color;
|
||||
@inverse-nav-default-item-hover-color: @inverse-global-color;
|
||||
@inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
|
||||
@inverse-nav-default-header-color: @inverse-global-emphasis-color;
|
||||
@inverse-nav-default-divider-border: @inverse-global-border;
|
||||
@inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
|
||||
@inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
|
||||
@inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
|
||||
|
||||
@inverse-nav-primary-item-color: @inverse-global-muted-color;
|
||||
@inverse-nav-primary-item-hover-color: @inverse-global-color;
|
||||
@inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
|
||||
@inverse-nav-primary-header-color: @inverse-global-emphasis-color;
|
||||
@inverse-nav-primary-divider-border: @inverse-global-border;
|
||||
@inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
|
||||
@inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
|
||||
@inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
|
||||
|
||||
@inverse-nav-dividers-border: @inverse-global-border;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
//
|
||||
// Parent icon modifier
|
||||
//
|
||||
|
||||
.uk-nav-parent-icon > .uk-parent > a::after {
|
||||
.svg-fill(@internal-nav-parent-close-image, "#000", @inverse-nav-parent-icon-color);
|
||||
.hook-inverse-nav-parent-icon();
|
||||
}
|
||||
|
||||
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @inverse-nav-parent-icon-color); }
|
||||
|
||||
//
|
||||
// Default
|
||||
//
|
||||
|
||||
.uk-nav-default > li > a {
|
||||
color: @inverse-nav-default-item-color;
|
||||
.hook-inverse-nav-default-item();
|
||||
}
|
||||
|
||||
.uk-nav-default > li > a:hover {
|
||||
color: @inverse-nav-default-item-hover-color;
|
||||
.hook-inverse-nav-default-item-hover();
|
||||
}
|
||||
|
||||
.uk-nav-default > li.uk-active > a {
|
||||
color: @inverse-nav-default-item-active-color;
|
||||
.hook-inverse-nav-default-item-active();
|
||||
}
|
||||
|
||||
.uk-nav-default .uk-nav-header {
|
||||
color: @inverse-nav-default-header-color;
|
||||
.hook-inverse-nav-default-header();
|
||||
}
|
||||
|
||||
.uk-nav-default .uk-nav-divider {
|
||||
border-top-color: @inverse-nav-default-divider-border;
|
||||
.hook-inverse-nav-default-divider();
|
||||
}
|
||||
|
||||
.uk-nav-default .uk-nav-sub a { color: @inverse-nav-default-sublist-item-color; }
|
||||
|
||||
.uk-nav-default .uk-nav-sub a:hover { color: @inverse-nav-default-sublist-item-hover-color; }
|
||||
|
||||
.uk-nav-default .uk-nav-sub li.uk-active > a { color: @inverse-nav-default-sublist-item-active-color; }
|
||||
|
||||
//
|
||||
// Primary
|
||||
//
|
||||
|
||||
.uk-nav-primary > li > a {
|
||||
color: @inverse-nav-primary-item-color;
|
||||
.hook-inverse-nav-primary-item();
|
||||
}
|
||||
|
||||
.uk-nav-primary > li > a:hover {
|
||||
color: @inverse-nav-primary-item-hover-color;
|
||||
.hook-inverse-nav-primary-item-hover();
|
||||
}
|
||||
|
||||
.uk-nav-primary > li.uk-active > a {
|
||||
color: @inverse-nav-primary-item-active-color;
|
||||
.hook-inverse-nav-primary-item-active();
|
||||
}
|
||||
|
||||
.uk-nav-primary .uk-nav-header {
|
||||
color: @inverse-nav-primary-header-color;
|
||||
.hook-inverse-nav-primary-header();
|
||||
}
|
||||
|
||||
.uk-nav-primary .uk-nav-divider {
|
||||
border-top-color: @inverse-nav-primary-divider-border;
|
||||
.hook-inverse-nav-primary-divider();
|
||||
}
|
||||
|
||||
.uk-nav-primary .uk-nav-sub a { color: @inverse-nav-primary-sublist-item-color; }
|
||||
|
||||
.uk-nav-primary .uk-nav-sub a:hover { color: @inverse-nav-primary-sublist-item-hover-color; }
|
||||
|
||||
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
|
||||
|
||||
//
|
||||
// Dividers
|
||||
//
|
||||
|
||||
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
||||
border-top-color: @inverse-nav-dividers-border;
|
||||
.hook-nav-dividers();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-nav-parent-icon() {}
|
||||
.hook-inverse-nav-default-item() {}
|
||||
.hook-inverse-nav-default-item-hover() {}
|
||||
.hook-inverse-nav-default-item-active() {}
|
||||
.hook-inverse-nav-default-header() {}
|
||||
.hook-inverse-nav-default-divider() {}
|
||||
.hook-inverse-nav-primary-item() {}
|
||||
.hook-inverse-nav-primary-item-hover() {}
|
||||
.hook-inverse-nav-primary-item-active() {}
|
||||
.hook-inverse-nav-primary-header() {}
|
||||
.hook-inverse-nav-primary-divider() {}
|
||||
.hook-inverse-nav-dividers() {}
|
||||
586
client/uikit/src/less/components/navbar.less
Normal file
586
client/uikit/src/less/components/navbar.less
Normal file
@@ -0,0 +1,586 @@
|
||||
// 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;
|
||||
@navbar-color-mode: none;
|
||||
|
||||
@navbar-nav-item-height: 80px;
|
||||
@navbar-nav-item-padding-horizontal: 15px;
|
||||
@navbar-nav-item-color: @global-muted-color;
|
||||
@navbar-nav-item-font-size: @global-font-size;
|
||||
@navbar-nav-item-font-family: @global-font-family;
|
||||
@navbar-nav-item-hover-color: @global-color;
|
||||
@navbar-nav-item-onclick-color: @global-emphasis-color;
|
||||
@navbar-nav-item-active-color: @global-emphasis-color;
|
||||
|
||||
@navbar-item-color: @global-color;
|
||||
|
||||
@navbar-toggle-color: @global-muted-color;
|
||||
@navbar-toggle-hover-color: @global-color;
|
||||
|
||||
@navbar-subtitle-font-size: @global-small-font-size;
|
||||
|
||||
@navbar-dropdown-z-index: @global-z-index + 20;
|
||||
@navbar-dropdown-width: 200px;
|
||||
@navbar-dropdown-margin: 0;
|
||||
@navbar-dropdown-padding: 15px;
|
||||
@navbar-dropdown-background: @global-muted-background;
|
||||
@navbar-dropdown-color: @global-color;
|
||||
@navbar-dropdown-grid-gutter-horizontal: @global-gutter;
|
||||
@navbar-dropdown-grid-gutter-vertical: @navbar-dropdown-grid-gutter-horizontal;
|
||||
|
||||
@navbar-dropdown-dropbar-margin-top: 0;
|
||||
@navbar-dropdown-dropbar-margin-bottom: @navbar-dropdown-dropbar-margin-top;
|
||||
|
||||
@navbar-dropdown-nav-item-color: @global-muted-color;
|
||||
@navbar-dropdown-nav-item-hover-color: @global-color;
|
||||
@navbar-dropdown-nav-item-active-color: @global-emphasis-color;
|
||||
@navbar-dropdown-nav-header-color: @global-emphasis-color;
|
||||
@navbar-dropdown-nav-divider-border-width: @global-border-width;
|
||||
@navbar-dropdown-nav-divider-border: @global-border;
|
||||
@navbar-dropdown-nav-sublist-item-color: @global-muted-color;
|
||||
@navbar-dropdown-nav-sublist-item-hover-color: @global-color;
|
||||
@navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
|
||||
|
||||
@navbar-dropbar-background: @navbar-dropdown-background;
|
||||
@navbar-dropbar-z-index: @global-z-index - 20;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Navbar
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Create position context to center navbar group
|
||||
*/
|
||||
|
||||
.uk-navbar {
|
||||
display: flex;
|
||||
/* 1 */
|
||||
position: relative;
|
||||
.hook-navbar();
|
||||
}
|
||||
|
||||
|
||||
/* Container
|
||||
========================================================================== */
|
||||
|
||||
.uk-navbar-container:not(.uk-navbar-transparent) {
|
||||
background: @navbar-background;
|
||||
.hook-navbar-container();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) when (@navbar-color-mode = light) {}
|
||||
.uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-dark all) when (@navbar-color-mode = dark) {}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
.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;
|
||||
.hook-navbar-nav-item-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-navbar-nav > li > a:active {
|
||||
color: @navbar-nav-item-onclick-color;
|
||||
.hook-navbar-nav-item-onclick();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-navbar-nav > li.uk-active > a {
|
||||
color: @navbar-nav-item-active-color;
|
||||
.hook-navbar-nav-item-active();
|
||||
}
|
||||
|
||||
|
||||
/* Item
|
||||
========================================================================== */
|
||||
|
||||
.uk-navbar-item {
|
||||
color: @navbar-item-color;
|
||||
.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;
|
||||
.hook-navbar-toggle();
|
||||
}
|
||||
|
||||
.uk-navbar-toggle:hover,
|
||||
.uk-navbar-toggle[aria-expanded="true"] {
|
||||
color: @navbar-toggle-hover-color;
|
||||
text-decoration: none;
|
||||
.hook-navbar-toggle-hover();
|
||||
}
|
||||
|
||||
/*
|
||||
* Icon
|
||||
* Adopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-navbar-toggle-icon {
|
||||
.hook-navbar-toggle-icon();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
:hover > .uk-navbar-toggle-icon {
|
||||
.hook-navbar-toggle-icon-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Subtitle
|
||||
========================================================================== */
|
||||
|
||||
.uk-navbar-subtitle {
|
||||
font-size: @navbar-subtitle-font-size;
|
||||
.hook-navbar-subtitle();
|
||||
}
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-navbar-primary {
|
||||
.hook-navbar-primary();
|
||||
}
|
||||
|
||||
.uk-navbar-transparent {
|
||||
.hook-navbar-transparent();
|
||||
}
|
||||
|
||||
.uk-navbar-sticky {
|
||||
.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;
|
||||
.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;
|
||||
.hook-navbar-dropdown-dropbar();
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown Nav
|
||||
* Adopts `uk-nav`
|
||||
========================================================================== */
|
||||
|
||||
.uk-navbar-dropdown-nav {
|
||||
.hook-navbar-dropdown-nav();
|
||||
}
|
||||
|
||||
/*
|
||||
* Items
|
||||
*/
|
||||
|
||||
.uk-navbar-dropdown-nav > li > a {
|
||||
color: @navbar-dropdown-nav-item-color;
|
||||
.hook-navbar-dropdown-nav-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-navbar-dropdown-nav > li > a:hover {
|
||||
color: @navbar-dropdown-nav-item-hover-color;
|
||||
.hook-navbar-dropdown-nav-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-navbar-dropdown-nav > li.uk-active > a {
|
||||
color: @navbar-dropdown-nav-item-active-color;
|
||||
.hook-navbar-dropdown-nav-item-active();
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.uk-navbar-dropdown-nav .uk-nav-header {
|
||||
color: @navbar-dropdown-nav-header-color;
|
||||
.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;
|
||||
.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;
|
||||
.hook-navbar-dropbar();
|
||||
}
|
||||
|
||||
/*
|
||||
* Slide modifier
|
||||
*/
|
||||
|
||||
.uk-navbar-dropbar-slide {
|
||||
position: absolute;
|
||||
z-index: @navbar-dropbar-z-index;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.hook-navbar-dropbar-slide();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-navbar-misc();
|
||||
|
||||
.hook-navbar() {}
|
||||
.hook-navbar-container() {}
|
||||
.hook-navbar-nav-item() {}
|
||||
.hook-navbar-nav-item-hover() {}
|
||||
.hook-navbar-nav-item-onclick() {}
|
||||
.hook-navbar-nav-item-active() {}
|
||||
.hook-navbar-item() {}
|
||||
.hook-navbar-toggle(){}
|
||||
.hook-navbar-toggle-hover(){}
|
||||
.hook-navbar-toggle-icon(){}
|
||||
.hook-navbar-toggle-icon-hover(){}
|
||||
.hook-navbar-subtitle() {}
|
||||
.hook-navbar-primary(){}
|
||||
.hook-navbar-transparent(){}
|
||||
.hook-navbar-sticky(){}
|
||||
.hook-navbar-dropdown(){}
|
||||
.hook-navbar-dropdown-dropbar(){}
|
||||
.hook-navbar-dropdown-nav(){}
|
||||
.hook-navbar-dropdown-nav-item() {}
|
||||
.hook-navbar-dropdown-nav-item-hover() {}
|
||||
.hook-navbar-dropdown-nav-item-active() {}
|
||||
.hook-navbar-dropdown-nav-header() {}
|
||||
.hook-navbar-dropdown-nav-divider() {}
|
||||
.hook-navbar-dropbar(){}
|
||||
.hook-navbar-dropbar-slide(){}
|
||||
.hook-navbar-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-navbar-nav-item-color: @inverse-global-muted-color;
|
||||
@inverse-navbar-nav-item-hover-color: @inverse-global-color;
|
||||
@inverse-navbar-nav-item-onclick-color: @inverse-global-emphasis-color;
|
||||
@inverse-navbar-nav-item-active-color: @inverse-global-emphasis-color;
|
||||
@inverse-navbar-item-color: @inverse-global-color;
|
||||
@inverse-navbar-toggle-color: @inverse-global-muted-color;
|
||||
@inverse-navbar-toggle-hover-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-navbar-nav > li > a {
|
||||
color: @inverse-navbar-nav-item-color;
|
||||
.hook-inverse-navbar-nav-item();
|
||||
}
|
||||
|
||||
.uk-navbar-nav > li:hover > a,
|
||||
.uk-navbar-nav > li > a[aria-expanded="true"] {
|
||||
color: @inverse-navbar-nav-item-hover-color;
|
||||
.hook-inverse-navbar-nav-item-hover();
|
||||
}
|
||||
|
||||
.uk-navbar-nav > li > a:active {
|
||||
color: @inverse-navbar-nav-item-onclick-color;
|
||||
.hook-inverse-navbar-nav-item-onclick();
|
||||
}
|
||||
|
||||
.uk-navbar-nav > li.uk-active > a {
|
||||
color: @inverse-navbar-nav-item-active-color;
|
||||
.hook-inverse-navbar-nav-item-active();
|
||||
}
|
||||
|
||||
.uk-navbar-item {
|
||||
color: @inverse-navbar-item-color;
|
||||
.hook-inverse-navbar-item();
|
||||
}
|
||||
|
||||
.uk-navbar-toggle {
|
||||
color: @inverse-navbar-toggle-color;
|
||||
.hook-inverse-navbar-toggle();
|
||||
}
|
||||
|
||||
.uk-navbar-toggle:hover,
|
||||
.uk-navbar-toggle[aria-expanded="true"] {
|
||||
color: @inverse-navbar-toggle-hover-color;
|
||||
.hook-inverse-navbar-toggle-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-navbar-nav-item() {}
|
||||
.hook-inverse-navbar-nav-item-hover() {}
|
||||
.hook-inverse-navbar-nav-item-onclick() {}
|
||||
.hook-inverse-navbar-nav-item-active() {}
|
||||
.hook-inverse-navbar-item() {}
|
||||
.hook-inverse-navbar-toggle() {}
|
||||
.hook-inverse-navbar-toggle-hover() {}
|
||||
191
client/uikit/src/less/components/notification.less
Normal file
191
client/uikit/src/less/components/notification.less
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;
|
||||
@notification-z-index: @global-z-index + 40;
|
||||
@notification-width: 350px;
|
||||
|
||||
@notification-message-margin-top: 10px;
|
||||
@notification-message-padding: @global-small-gutter;
|
||||
@notification-message-background: @global-muted-background;
|
||||
@notification-message-color: @global-color;
|
||||
@notification-message-font-size: @global-medium-font-size;
|
||||
@notification-message-line-height: 1.4;
|
||||
|
||||
@notification-close-top: @notification-message-padding + 5px;
|
||||
@notification-close-right: @notification-message-padding;
|
||||
|
||||
@notification-message-primary-color: @global-primary-background;
|
||||
@notification-message-success-color: @global-success-background;
|
||||
@notification-message-warning-color: @global-warning-background;
|
||||
@notification-message-danger-color: @global-danger-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.hook-notification();
|
||||
}
|
||||
|
||||
|
||||
/* Position modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-notification-top-right,
|
||||
.uk-notification-bottom-right {
|
||||
left: auto;
|
||||
right: @notification-position;
|
||||
}
|
||||
|
||||
.uk-notification-top-center,
|
||||
.uk-notification-bottom-center {
|
||||
left: 50%;
|
||||
margin-left: (@notification-width / -2);
|
||||
}
|
||||
|
||||
.uk-notification-bottom-left,
|
||||
.uk-notification-bottom-right,
|
||||
.uk-notification-bottom-center {
|
||||
top: auto;
|
||||
bottom: @notification-position;
|
||||
}
|
||||
|
||||
|
||||
/* Responsiveness
|
||||
========================================================================== */
|
||||
|
||||
/* Phones portrait and smaller */
|
||||
@media (max-width: @breakpoint-xsmall-max) {
|
||||
|
||||
.uk-notification {
|
||||
left: @notification-position;
|
||||
right: @notification-position;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Message
|
||||
========================================================================== */
|
||||
|
||||
.uk-notification-message {
|
||||
position: relative;
|
||||
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;
|
||||
.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;
|
||||
.hook-notification-close();
|
||||
}
|
||||
|
||||
.uk-notification-message:hover .uk-notification-close { display: block; }
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-notification-message-primary {
|
||||
color: @notification-message-primary-color;
|
||||
.hook-notification-message-primary();
|
||||
}
|
||||
|
||||
/*
|
||||
* Success
|
||||
*/
|
||||
|
||||
.uk-notification-message-success {
|
||||
color: @notification-message-success-color;
|
||||
.hook-notification-message-success();
|
||||
}
|
||||
|
||||
/*
|
||||
* Warning
|
||||
*/
|
||||
|
||||
.uk-notification-message-warning {
|
||||
color: @notification-message-warning-color;
|
||||
.hook-notification-message-warning();
|
||||
}
|
||||
|
||||
/*
|
||||
* Danger
|
||||
*/
|
||||
|
||||
.uk-notification-message-danger {
|
||||
color: @notification-message-danger-color;
|
||||
.hook-notification-message-danger();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-notification-misc();
|
||||
|
||||
.hook-notification() {}
|
||||
.hook-notification-message() {}
|
||||
.hook-notification-close() {}
|
||||
.hook-notification-message-primary() {}
|
||||
.hook-notification-message-success() {}
|
||||
.hook-notification-message-warning() {}
|
||||
.hook-notification-message-danger() {}
|
||||
.hook-notification-misc() {}
|
||||
306
client/uikit/src/less/components/offcanvas.less
Normal file
306
client/uikit/src/less/components/offcanvas.less
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;
|
||||
|
||||
@offcanvas-bar-width: 270px;
|
||||
@offcanvas-bar-padding-vertical: @global-margin;
|
||||
@offcanvas-bar-padding-horizontal: @global-margin;
|
||||
@offcanvas-bar-background: @global-secondary-background;
|
||||
@offcanvas-bar-color-mode: light;
|
||||
|
||||
@offcanvas-bar-width-m: 350px;
|
||||
@offcanvas-bar-padding-vertical-m: @global-medium-gutter;
|
||||
@offcanvas-bar-padding-horizontal-m: @global-medium-gutter;
|
||||
|
||||
@offcanvas-close-position: 20px;
|
||||
@offcanvas-close-padding: 5px;
|
||||
|
||||
@offcanvas-overlay-background: rgba(0,0,0,0.1);
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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
|
||||
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
|
||||
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}
|
||||
|
||||
/* 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;
|
||||
.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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-offcanvas-misc();
|
||||
|
||||
.hook-offcanvas-bar() {}
|
||||
.hook-offcanvas-close() {}
|
||||
.hook-offcanvas-overlay() {}
|
||||
.hook-offcanvas-misc() {}
|
||||
85
client/uikit/src/less/components/overlay.less
Normal file
85
client/uikit/src/less/components/overlay.less
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;
|
||||
@overlay-padding-vertical: @global-gutter;
|
||||
|
||||
@overlay-default-background: fade(@global-background, 80%);
|
||||
|
||||
@overlay-primary-background: fade(@global-secondary-background, 80%);
|
||||
@overlay-primary-color-mode: light;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Overlay
|
||||
========================================================================== */
|
||||
|
||||
.uk-overlay {
|
||||
padding: @overlay-padding-vertical @overlay-padding-horizontal;
|
||||
.hook-overlay();
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove margin from the last-child
|
||||
*/
|
||||
|
||||
.uk-overlay > :last-child { margin-bottom: 0; }
|
||||
|
||||
|
||||
/* Icon
|
||||
========================================================================== */
|
||||
|
||||
.uk-overlay-icon {
|
||||
.hook-overlay-icon();
|
||||
}
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
|
||||
.uk-overlay-default {
|
||||
background: @overlay-default-background;
|
||||
.hook-overlay-default();
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-overlay-primary {
|
||||
background: @overlay-primary-background;
|
||||
.hook-overlay-primary();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-overlay-primary:extend(.uk-light all) when (@overlay-primary-color-mode = light) {}
|
||||
.uk-overlay-primary:extend(.uk-dark all) when (@overlay-primary-color-mode = dark) {}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-overlay-misc();
|
||||
|
||||
.hook-overlay() {}
|
||||
.hook-overlay-icon() {}
|
||||
.hook-overlay-default() {}
|
||||
.hook-overlay-primary() {}
|
||||
.hook-overlay-misc() {}
|
||||
81
client/uikit/src/less/components/padding.less
Normal file
81
client/uikit/src/less/components/padding.less
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;
|
||||
@padding-padding-l: @global-medium-gutter;
|
||||
|
||||
@padding-small-padding: @global-small-gutter;
|
||||
|
||||
@padding-large-padding: @global-medium-gutter;
|
||||
@padding-large-padding-l: @global-large-gutter;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-padding-misc();
|
||||
|
||||
.hook-padding-misc() {}
|
||||
152
client/uikit/src/less/components/pagination.less
Normal file
152
client/uikit/src/less/components/pagination.less
Normal file
@@ -0,0 +1,152 @@
|
||||
// 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;
|
||||
|
||||
@pagination-item-padding-vertical: 5px;
|
||||
@pagination-item-padding-horizontal: 10px;
|
||||
@pagination-item-color: @global-muted-color;
|
||||
@pagination-item-hover-color: @global-color;
|
||||
@pagination-item-hover-text-decoration: none;
|
||||
@pagination-item-active-color: @global-color;
|
||||
@pagination-item-disabled-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-pagination-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-pagination > * > :hover {
|
||||
color: @pagination-item-hover-color;
|
||||
text-decoration: @pagination-item-hover-text-decoration;
|
||||
.hook-pagination-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-pagination > .uk-active > * {
|
||||
color: @pagination-item-active-color;
|
||||
.hook-pagination-item-active();
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.uk-pagination > .uk-disabled > * {
|
||||
color: @pagination-item-disabled-color;
|
||||
.hook-pagination-item-disabled();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-pagination-misc();
|
||||
|
||||
.hook-pagination() {}
|
||||
.hook-pagination-item() {}
|
||||
.hook-pagination-item-hover() {}
|
||||
.hook-pagination-item-active() {}
|
||||
.hook-pagination-item-disabled() {}
|
||||
.hook-pagination-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-pagination-item-color: @inverse-global-muted-color;
|
||||
@inverse-pagination-item-hover-color: @inverse-global-color;
|
||||
@inverse-pagination-item-active-color: @inverse-global-color;
|
||||
@inverse-pagination-item-disabled-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-pagination > * > * {
|
||||
color: @inverse-pagination-item-color;
|
||||
.hook-inverse-pagination-item();
|
||||
}
|
||||
|
||||
.uk-pagination > * > :hover {
|
||||
color: @inverse-pagination-item-hover-color;
|
||||
.hook-inverse-pagination-item-hover();
|
||||
}
|
||||
|
||||
.uk-pagination > .uk-active > * {
|
||||
color: @inverse-pagination-item-active-color;
|
||||
.hook-inverse-pagination-item-active();
|
||||
}
|
||||
|
||||
.uk-pagination > .uk-disabled > * {
|
||||
color: @inverse-pagination-item-disabled-color;
|
||||
.hook-inverse-pagination-item-disabled();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-pagination-item() {}
|
||||
.hook-inverse-pagination-item-hover() {}
|
||||
.hook-inverse-pagination-item-active() {}
|
||||
.hook-inverse-pagination-item-disabled() {}
|
||||
45
client/uikit/src/less/components/placeholder.less
Normal file
45
client/uikit/src/less/components/placeholder.less
Normal file
@@ -0,0 +1,45 @@
|
||||
// Name: Placeholder
|
||||
// Description: Component to create placeholder boxes
|
||||
//
|
||||
// Component: `uk-placeholder`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@placeholder-margin-vertical: @global-margin;
|
||||
@placeholder-padding-vertical: @global-gutter;
|
||||
@placeholder-padding-horizontal: @global-gutter;
|
||||
@placeholder-background: @global-muted-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Placeholder
|
||||
========================================================================== */
|
||||
|
||||
.uk-placeholder {
|
||||
margin-bottom: @placeholder-margin-vertical;
|
||||
padding: @placeholder-padding-vertical @placeholder-padding-horizontal;
|
||||
background: @placeholder-background;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-placeholder-misc();
|
||||
|
||||
.hook-placeholder() {}
|
||||
.hook-placeholder-misc() {}
|
||||
228
client/uikit/src/less/components/position.less
Normal file
228
client/uikit/src/less/components/position.less
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;
|
||||
@position-medium-margin: @global-gutter;
|
||||
@position-large-margin: @global-gutter;
|
||||
@position-large-margin-l: 50px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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: ~'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: ~'calc(50% - var(--uk-position-margin-offset))';
|
||||
left: ~'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: ~'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: ~'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
|
||||
// ========================================================================
|
||||
|
||||
.hook-position-misc();
|
||||
|
||||
.hook-position-misc() {}
|
||||
61
client/uikit/src/less/components/print.less
Normal file
61
client/uikit/src/less/components/print.less
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; }
|
||||
|
||||
.hook-print();
|
||||
|
||||
}
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-print() {}
|
||||
105
client/uikit/src/less/components/progress.less
Normal file
105
client/uikit/src/less/components/progress.less
Normal file
@@ -0,0 +1,105 @@
|
||||
// Name: Progress
|
||||
// Description: Component to create progress bars
|
||||
//
|
||||
// Component: `uk-progress`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@progress-height: 15px;
|
||||
@progress-margin-vertical: @global-margin;
|
||||
@progress-background: @global-muted-background;
|
||||
|
||||
@progress-bar-background: @global-primary-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-progress-bar();
|
||||
}
|
||||
|
||||
.uk-progress::-moz-progress-bar {
|
||||
background-color: @progress-bar-background;
|
||||
.hook-progress-bar();
|
||||
}
|
||||
|
||||
.uk-progress::-ms-fill {
|
||||
background-color: @progress-bar-background;
|
||||
transition: width 0.6s ease;
|
||||
/* 1 */
|
||||
border: 0;
|
||||
.hook-progress-bar();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-progress-misc();
|
||||
|
||||
.hook-progress() {}
|
||||
.hook-progress-bar() {}
|
||||
.hook-progress-misc() {}
|
||||
403
client/uikit/src/less/components/search.less
Normal file
403
client/uikit/src/less/components/search.less
Normal file
@@ -0,0 +1,403 @@
|
||||
// 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;
|
||||
@search-placeholder-color: @global-muted-color;
|
||||
|
||||
@search-icon-color: @global-muted-color;
|
||||
|
||||
@search-default-width: 240px;
|
||||
@search-default-height: @global-control-height;
|
||||
@search-default-padding-horizontal: 10px;
|
||||
@search-default-background: @global-muted-background;
|
||||
@search-default-focus-background: darken(@search-default-background, 5%);
|
||||
|
||||
@search-default-icon-width: @global-control-height;
|
||||
@search-default-icon-padding: 0;
|
||||
|
||||
@search-navbar-width: 400px;
|
||||
@search-navbar-height: 40px;
|
||||
@search-navbar-background: transparent;
|
||||
@search-navbar-font-size: @global-large-font-size;
|
||||
|
||||
@search-navbar-icon-width: 40px;
|
||||
@search-navbar-icon-padding: 0;
|
||||
|
||||
@search-large-width: 500px;
|
||||
@search-large-height: 80px;
|
||||
@search-large-background: transparent;
|
||||
@search-large-font-size: @global-2xlarge-font-size;
|
||||
|
||||
@search-large-icon-width: 80px;
|
||||
@search-large-icon-padding: 0;
|
||||
|
||||
@search-toggle-color: @global-muted-color;
|
||||
@search-toggle-hover-color: @global-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-search-default-input();
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-search-default .uk-search-input:focus {
|
||||
background-color: @search-default-focus-background;
|
||||
.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;
|
||||
.hook-search-navbar-input();
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-search-navbar .uk-search-input:focus {
|
||||
.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;
|
||||
.hook-search-large-input();
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.uk-search-large .uk-search-input:focus {
|
||||
.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;
|
||||
.hook-search-toggle();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-search-toggle:hover {
|
||||
color: @search-toggle-hover-color;
|
||||
.hook-search-toggle-hover();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-search-misc();
|
||||
|
||||
.hook-search-input() {}
|
||||
.hook-search-default-input() {}
|
||||
.hook-search-default-input-focus() {}
|
||||
.hook-search-navbar-input() {}
|
||||
.hook-search-navbar-input-focus() {}
|
||||
.hook-search-large-input() {}
|
||||
.hook-search-large-input-focus() {}
|
||||
|
||||
.hook-search-toggle() {}
|
||||
.hook-search-toggle-hover() {}
|
||||
|
||||
.hook-search-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-search-color: @inverse-global-color;
|
||||
@inverse-search-placeholder-color: @inverse-global-muted-color;
|
||||
|
||||
@inverse-search-icon-color: @inverse-global-muted-color;
|
||||
|
||||
@inverse-search-default-background: @inverse-global-muted-background;
|
||||
@inverse-search-default-focus-background: fadein(@inverse-search-default-background, 5%);
|
||||
|
||||
@inverse-search-navbar-background: transparent;
|
||||
|
||||
@inverse-search-large-background: transparent;
|
||||
|
||||
@inverse-search-toggle-color: @inverse-global-muted-color;
|
||||
@inverse-search-toggle-hover-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
//
|
||||
// Input
|
||||
//
|
||||
|
||||
.uk-search-input { color: @inverse-search-color; }
|
||||
|
||||
.uk-search-input:-ms-input-placeholder { color: @inverse-search-placeholder-color !important; }
|
||||
.uk-search-input::placeholder { color: @inverse-search-placeholder-color; }
|
||||
|
||||
|
||||
//
|
||||
// Icon
|
||||
//
|
||||
|
||||
.uk-search .uk-search-icon { color: @inverse-search-icon-color; }
|
||||
.uk-search .uk-search-icon:hover { color: @inverse-search-icon-color; }
|
||||
|
||||
//
|
||||
// Style modifier
|
||||
//
|
||||
|
||||
.uk-search-default .uk-search-input {
|
||||
background-color: @inverse-search-default-background;
|
||||
.hook-inverse-search-default-input();
|
||||
}
|
||||
|
||||
.uk-search-default .uk-search-input:focus {
|
||||
background-color: @inverse-search-default-focus-background;
|
||||
.hook-inverse-search-default-input-focus();
|
||||
}
|
||||
|
||||
.uk-search-navbar .uk-search-input {
|
||||
background-color: @inverse-search-navbar-background;
|
||||
.hook-inverse-search-navbar-input();
|
||||
}
|
||||
|
||||
.uk-search-navbar .uk-search-input:focus {
|
||||
.hook-inverse-search-navbar-input-focus();
|
||||
}
|
||||
|
||||
.uk-search-large .uk-search-input {
|
||||
background-color: @inverse-search-large-background;
|
||||
.hook-inverse-search-large-input();
|
||||
}
|
||||
|
||||
.uk-search-large .uk-search-input:focus {
|
||||
.hook-inverse-search-large-input-focus();
|
||||
}
|
||||
|
||||
//
|
||||
// Toggle
|
||||
//
|
||||
|
||||
.uk-search-toggle {
|
||||
color: @inverse-search-toggle-color;
|
||||
.hook-inverse-search-toggle();
|
||||
}
|
||||
|
||||
.uk-search-toggle:hover {
|
||||
color: @inverse-search-toggle-hover-color;
|
||||
.hook-inverse-search-toggle-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-search-default-input() {}
|
||||
.hook-inverse-search-default-input-focus() {}
|
||||
.hook-inverse-search-navbar-input() {}
|
||||
.hook-inverse-search-navbar-input-focus() {}
|
||||
.hook-inverse-search-large-input() {}
|
||||
.hook-inverse-search-large-input-focus() {}
|
||||
.hook-inverse-search-toggle() {}
|
||||
.hook-inverse-search-toggle-hover() {}
|
||||
212
client/uikit/src/less/components/section.less
Normal file
212
client/uikit/src/less/components/section.less
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;
|
||||
@section-padding-vertical-m: @global-large-margin;
|
||||
|
||||
@section-xsmall-padding-vertical: @global-margin;
|
||||
|
||||
@section-small-padding-vertical: @global-medium-margin;
|
||||
|
||||
@section-large-padding-vertical: @global-large-margin;
|
||||
@section-large-padding-vertical-m: @global-xlarge-margin;
|
||||
|
||||
@section-xlarge-padding-vertical: @global-xlarge-margin;
|
||||
@section-xlarge-padding-vertical-m: (@global-large-margin + @global-xlarge-margin);
|
||||
|
||||
@section-default-background: @global-background;
|
||||
|
||||
@section-muted-background: @global-muted-background;
|
||||
|
||||
@section-primary-background: @global-primary-background;
|
||||
@section-primary-color-mode: light;
|
||||
|
||||
@section-secondary-background: @global-secondary-background;
|
||||
@section-secondary-color-mode: light;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-section-default();
|
||||
}
|
||||
|
||||
/*
|
||||
* Muted
|
||||
*/
|
||||
|
||||
.uk-section-muted {
|
||||
background: @section-muted-background;
|
||||
.hook-section-muted();
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-section-primary {
|
||||
background: @section-primary-background;
|
||||
.hook-section-primary();
|
||||
}
|
||||
|
||||
.uk-section-primary:not(.uk-preserve-color):extend(.uk-light all) when (@section-primary-color-mode = light) {}
|
||||
.uk-section-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-primary-color-mode = dark) {}
|
||||
|
||||
/*
|
||||
* Secondary
|
||||
*/
|
||||
|
||||
.uk-section-secondary {
|
||||
background: @section-secondary-background;
|
||||
.hook-section-secondary();
|
||||
}
|
||||
|
||||
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@section-secondary-color-mode = light) {}
|
||||
.uk-section-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@section-secondary-color-mode = dark) {}
|
||||
|
||||
|
||||
/* Overlap modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Reserved modifier to make a section overlap another section with an border image
|
||||
* Implemented by the theme
|
||||
*/
|
||||
|
||||
.uk-section-overlap {
|
||||
.hook-section-overlap();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-section-misc();
|
||||
|
||||
.hook-section() {}
|
||||
.hook-section-default() {}
|
||||
.hook-section-muted() {}
|
||||
.hook-section-secondary() {}
|
||||
.hook-section-primary() {}
|
||||
.hook-section-overlap() {}
|
||||
.hook-section-misc() {}
|
||||
137
client/uikit/src/less/components/slidenav.less
Normal file
137
client/uikit/src/less/components/slidenav.less
Normal file
@@ -0,0 +1,137 @@
|
||||
// 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;
|
||||
@slidenav-padding-horizontal: 10px;
|
||||
|
||||
@slidenav-color: fade(@global-color, 50%);
|
||||
@slidenav-hover-color: fade(@global-color, 90%);
|
||||
@slidenav-active-color: fade(@global-color, 50%);
|
||||
|
||||
@slidenav-large-padding-vertical: 10px;
|
||||
@slidenav-large-padding-horizontal: @slidenav-large-padding-vertical;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Slidenav
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Adopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-slidenav {
|
||||
padding: @slidenav-padding-vertical @slidenav-padding-horizontal;
|
||||
color: @slidenav-color;
|
||||
.hook-slidenav();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-slidenav:hover {
|
||||
color: @slidenav-hover-color;
|
||||
.hook-slidenav-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-slidenav:active {
|
||||
color: @slidenav-active-color;
|
||||
.hook-slidenav-active();
|
||||
}
|
||||
|
||||
|
||||
/* Icon modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Previous
|
||||
*/
|
||||
|
||||
.uk-slidenav-previous {
|
||||
.hook-slidenav-previous();
|
||||
}
|
||||
|
||||
/*
|
||||
* Next
|
||||
*/
|
||||
|
||||
.uk-slidenav-next {
|
||||
.hook-slidenav-next();
|
||||
}
|
||||
|
||||
|
||||
/* Size modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-slidenav-large {
|
||||
padding: @slidenav-large-padding-vertical @slidenav-large-padding-horizontal;
|
||||
.hook-slidenav-large();
|
||||
}
|
||||
|
||||
|
||||
/* Container
|
||||
========================================================================== */
|
||||
|
||||
.uk-slidenav-container {
|
||||
display: flex;
|
||||
.hook-slidenav-container();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-slidenav-misc();
|
||||
|
||||
.hook-slidenav() {}
|
||||
.hook-slidenav-hover() {}
|
||||
.hook-slidenav-active() {}
|
||||
.hook-slidenav-previous() {}
|
||||
.hook-slidenav-next() {}
|
||||
.hook-slidenav-large() {}
|
||||
.hook-slidenav-container() {}
|
||||
.hook-slidenav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-slidenav-color: fade(@inverse-global-color, 70%);
|
||||
@inverse-slidenav-hover-color: fade(@inverse-global-color, 95%);
|
||||
@inverse-slidenav-active-color: fade(@inverse-global-color, 70%);
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-slidenav {
|
||||
color: @inverse-slidenav-color;
|
||||
.hook-inverse-slidenav();
|
||||
}
|
||||
|
||||
.uk-slidenav:hover {
|
||||
color: @inverse-slidenav-hover-color;
|
||||
.hook-inverse-slidenav-hover();
|
||||
}
|
||||
|
||||
.uk-slidenav:active {
|
||||
color: @inverse-slidenav-active-color;
|
||||
.hook-inverse-slidenav-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-slidenav() {}
|
||||
.hook-inverse-slidenav-hover() {}
|
||||
.hook-inverse-slidenav-active() {}
|
||||
116
client/uikit/src/less/components/slider.less
Normal file
116
client/uikit/src/less/components/slider.less
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;
|
||||
@slider-container-margin-bottom: -39px;
|
||||
@slider-container-margin-left: -25px;
|
||||
@slider-container-margin-right: -25px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Slider
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Prevent tab highlighting on iOS.
|
||||
*/
|
||||
|
||||
.uk-slider {
|
||||
/* 1 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-slider-misc();
|
||||
|
||||
.hook-slider() {}
|
||||
.hook-slider-misc() {}
|
||||
93
client/uikit/src/less/components/slideshow.less
Normal file
93
client/uikit/src/less/components/slideshow.less
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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-slideshow-misc();
|
||||
|
||||
.hook-slideshow() {}
|
||||
.hook-slideshow-misc() {}
|
||||
90
client/uikit/src/less/components/sortable.less
Normal file
90
client/uikit/src/less/components/sortable.less
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;
|
||||
|
||||
@sortable-placeholder-opacity: 0;
|
||||
|
||||
@sortable-empty-height: 50px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Sortable
|
||||
========================================================================== */
|
||||
|
||||
.uk-sortable {
|
||||
position: relative;
|
||||
.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;
|
||||
.hook-sortable-drag();
|
||||
}
|
||||
|
||||
|
||||
/* Placeholder
|
||||
========================================================================== */
|
||||
|
||||
.uk-sortable-placeholder {
|
||||
opacity: @sortable-placeholder-opacity;
|
||||
pointer-events: none;
|
||||
.hook-sortable-placeholder();
|
||||
}
|
||||
|
||||
|
||||
/* Empty modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-sortable-empty {
|
||||
min-height: @sortable-empty-height;
|
||||
.hook-sortable-empty();
|
||||
}
|
||||
|
||||
|
||||
/* Handle
|
||||
========================================================================== */
|
||||
|
||||
/* Hover */
|
||||
.uk-sortable-handle:hover { cursor: move; }
|
||||
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-sortable-misc();
|
||||
|
||||
.hook-sortable() {}
|
||||
.hook-sortable-drag() {}
|
||||
.hook-sortable-placeholder() {}
|
||||
.hook-sortable-empty() {}
|
||||
.hook-sortable-misc() {}
|
||||
74
client/uikit/src/less/components/spinner.less
Normal file
74
client/uikit/src/less/components/spinner.less
Normal file
@@ -0,0 +1,74 @@
|
||||
// Name: Spinner
|
||||
// Description: Component to create a loading spinner
|
||||
//
|
||||
// Component: `uk-spinner`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@spinner-size: 30px;
|
||||
@spinner-stroke-width: 1;
|
||||
@spinner-radius: floor(((@spinner-size - @spinner-stroke-width) / 2)); // Minus stroke width to prevent overflow clipping
|
||||
@spinner-circumference: round(2 * 3.141 * @spinner-radius);
|
||||
@spinner-duration: 1.4s;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Spinner
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Adopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-spinner {
|
||||
.hook-spinner();
|
||||
}
|
||||
|
||||
|
||||
/* SVG
|
||||
========================================================================== */
|
||||
|
||||
.uk-spinner > * { animation: uk-spinner-rotate @spinner-duration linear infinite; }
|
||||
|
||||
@keyframes uk-spinner-rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(270deg); }
|
||||
}
|
||||
|
||||
/*
|
||||
* Circle
|
||||
*/
|
||||
|
||||
.uk-spinner > * > * {
|
||||
stroke-dasharray: @spinner-circumference;
|
||||
stroke-dashoffset: 0;
|
||||
transform-origin: center;
|
||||
animation: uk-spinner-dash @spinner-duration ease-in-out infinite;
|
||||
stroke-width: @spinner-stroke-width;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes uk-spinner-dash {
|
||||
0% { stroke-dashoffset: @spinner-circumference; }
|
||||
50% {
|
||||
stroke-dashoffset: (@spinner-circumference / 4);
|
||||
transform:rotate(135deg);
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: @spinner-circumference;
|
||||
transform:rotate(450deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-spinner-misc();
|
||||
|
||||
.hook-spinner() {}
|
||||
.hook-spinner-misc() {}
|
||||
53
client/uikit/src/less/components/sticky.less
Normal file
53
client/uikit/src/less/components/sticky.less
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;
|
||||
|
||||
@sticky-animation-duration: 0.2s;
|
||||
@sticky-reverse-animation-duration: 0.2s;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-sticky-misc();
|
||||
|
||||
.hook-sticky-misc() {}
|
||||
309
client/uikit/src/less/components/subnav.less
Normal file
309
client/uikit/src/less/components/subnav.less
Normal file
@@ -0,0 +1,309 @@
|
||||
// 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;
|
||||
|
||||
@subnav-item-color: @global-muted-color;
|
||||
@subnav-item-hover-color: @global-color;
|
||||
@subnav-item-hover-text-decoration: none;
|
||||
@subnav-item-active-color: @global-emphasis-color;
|
||||
|
||||
@subnav-divider-margin-horizontal: @subnav-margin-horizontal;
|
||||
@subnav-divider-border-height: 1.5em;
|
||||
@subnav-divider-border-width: @global-border-width;
|
||||
@subnav-divider-border: @global-border;
|
||||
|
||||
@subnav-pill-item-padding-vertical: 5px;
|
||||
@subnav-pill-item-padding-horizontal: 10px;
|
||||
@subnav-pill-item-background: transparent;
|
||||
@subnav-pill-item-color: @subnav-item-color;
|
||||
@subnav-pill-item-hover-background: @global-muted-background;
|
||||
@subnav-pill-item-hover-color: @global-color;
|
||||
@subnav-pill-item-onclick-background: @subnav-pill-item-hover-background;
|
||||
@subnav-pill-item-onclick-color: @subnav-pill-item-hover-color;
|
||||
@subnav-pill-item-active-background: @global-primary-background;
|
||||
@subnav-pill-item-active-color: @global-inverse-color;
|
||||
|
||||
@subnav-item-disabled-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-subnav-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-subnav > * > a:hover {
|
||||
color: @subnav-item-hover-color;
|
||||
text-decoration: @subnav-item-hover-text-decoration;
|
||||
.hook-subnav-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-subnav > .uk-active > a {
|
||||
color: @subnav-item-active-color;
|
||||
.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;
|
||||
.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;
|
||||
.hook-subnav-pill-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-subnav-pill > * > a:hover {
|
||||
background-color: @subnav-pill-item-hover-background;
|
||||
color: @subnav-pill-item-hover-color;
|
||||
.hook-subnav-pill-item-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-subnav-pill > * > a:active {
|
||||
background-color: @subnav-pill-item-onclick-background;
|
||||
color: @subnav-pill-item-onclick-color;
|
||||
.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;
|
||||
.hook-subnav-pill-item-active();
|
||||
}
|
||||
|
||||
|
||||
/* Disabled
|
||||
* The same for all style modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-subnav > .uk-disabled > a {
|
||||
color: @subnav-item-disabled-color;
|
||||
.hook-subnav-item-disabled();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-subnav-misc();
|
||||
|
||||
.hook-subnav() {}
|
||||
.hook-subnav-item() {}
|
||||
.hook-subnav-item-hover() {}
|
||||
.hook-subnav-item-active() {}
|
||||
.hook-subnav-divider() {}
|
||||
.hook-subnav-pill-item() {}
|
||||
.hook-subnav-pill-item-hover() {}
|
||||
.hook-subnav-pill-item-onclick() {}
|
||||
.hook-subnav-pill-item-active() {}
|
||||
.hook-subnav-item-disabled() {}
|
||||
.hook-subnav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-subnav-item-color: @inverse-global-muted-color;
|
||||
@inverse-subnav-item-hover-color: @inverse-global-color;
|
||||
@inverse-subnav-item-active-color: @inverse-global-emphasis-color;
|
||||
@inverse-subnav-divider-border: @inverse-global-border;
|
||||
@inverse-subnav-pill-item-background: transparent;
|
||||
@inverse-subnav-pill-item-color: @inverse-global-muted-color;
|
||||
@inverse-subnav-pill-item-hover-background: @inverse-global-muted-background;
|
||||
@inverse-subnav-pill-item-hover-color: @inverse-global-color;
|
||||
@inverse-subnav-pill-item-onclick-background: @inverse-subnav-pill-item-hover-background;
|
||||
@inverse-subnav-pill-item-onclick-color: @inverse-subnav-pill-item-hover-color;
|
||||
@inverse-subnav-pill-item-active-background: @inverse-global-primary-background;
|
||||
@inverse-subnav-pill-item-active-color: @inverse-global-inverse-color;
|
||||
@inverse-subnav-item-disabled-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-subnav > * > :first-child {
|
||||
color: @inverse-subnav-item-color;
|
||||
.hook-inverse-subnav-item();
|
||||
}
|
||||
|
||||
.uk-subnav > * > a:hover {
|
||||
color: @inverse-subnav-item-hover-color;
|
||||
.hook-inverse-subnav-item-hover();
|
||||
}
|
||||
|
||||
.uk-subnav > .uk-active > a {
|
||||
color: @inverse-subnav-item-active-color;
|
||||
.hook-inverse-subnav-item-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Divider
|
||||
//
|
||||
|
||||
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
|
||||
border-left-color: @inverse-subnav-divider-border;
|
||||
.hook-inverse-subnav-divider();
|
||||
}
|
||||
|
||||
//
|
||||
// Pill
|
||||
//
|
||||
|
||||
.uk-subnav-pill > * > :first-child {
|
||||
background-color: @inverse-subnav-pill-item-background;
|
||||
color: @inverse-subnav-pill-item-color;
|
||||
.hook-inverse-subnav-pill-item();
|
||||
}
|
||||
|
||||
.uk-subnav-pill > * > a:hover {
|
||||
background-color: @inverse-subnav-pill-item-hover-background;
|
||||
color: @inverse-subnav-pill-item-hover-color;
|
||||
.hook-inverse-subnav-pill-item-hover();
|
||||
}
|
||||
|
||||
.uk-subnav-pill > * > a:active {
|
||||
background-color: @inverse-subnav-pill-item-onclick-background;
|
||||
color: @inverse-subnav-pill-item-onclick-color;
|
||||
.hook-inverse-subnav-pill-item-onclick();
|
||||
}
|
||||
|
||||
.uk-subnav-pill > .uk-active > a {
|
||||
background-color: @inverse-subnav-pill-item-active-background;
|
||||
color: @inverse-subnav-pill-item-active-color;
|
||||
.hook-inverse-subnav-pill-item-active();
|
||||
}
|
||||
|
||||
//
|
||||
// Disabled
|
||||
//
|
||||
|
||||
.uk-subnav > .uk-disabled > a {
|
||||
color: @inverse-subnav-item-disabled-color;
|
||||
.hook-inverse-subnav-item-disabled();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-subnav-item() {}
|
||||
.hook-inverse-subnav-item-hover() {}
|
||||
.hook-inverse-subnav-item-active() {}
|
||||
.hook-inverse-subnav-divider() {}
|
||||
.hook-inverse-subnav-pill-item() {}
|
||||
.hook-inverse-subnav-pill-item-hover() {}
|
||||
.hook-inverse-subnav-pill-item-onclick() {}
|
||||
.hook-inverse-subnav-pill-item-active() {}
|
||||
.hook-inverse-subnav-item-disabled() {}
|
||||
36
client/uikit/src/less/components/svg.less
Normal file
36
client/uikit/src/less/components/svg.less
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-svg-misc();
|
||||
|
||||
.hook-svg-misc() {}
|
||||
47
client/uikit/src/less/components/switcher.less
Normal file
47
client/uikit/src/less/components/switcher.less
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-switcher-misc();
|
||||
|
||||
.hook-switcher-misc() {}
|
||||
222
client/uikit/src/less/components/tab.less
Normal file
222
client/uikit/src/less/components/tab.less
Normal file
@@ -0,0 +1,222 @@
|
||||
// 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;
|
||||
|
||||
@tab-item-padding-horizontal: 10px;
|
||||
@tab-item-padding-vertical: 5px;
|
||||
@tab-item-color: @global-muted-color;
|
||||
@tab-item-hover-color: @global-color;
|
||||
@tab-item-hover-text-decoration: none;
|
||||
@tab-item-active-color: @global-emphasis-color;
|
||||
@tab-item-disabled-color: @global-muted-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-tab-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-tab > * > a:hover {
|
||||
color: @tab-item-hover-color;
|
||||
text-decoration: @tab-item-hover-text-decoration;
|
||||
.hook-tab-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-tab > .uk-active > a {
|
||||
color: @tab-item-active-color;
|
||||
.hook-tab-item-active();
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.uk-tab > .uk-disabled > a {
|
||||
color: @tab-item-disabled-color;
|
||||
.hook-tab-item-disabled();
|
||||
}
|
||||
|
||||
|
||||
/* Position modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Bottom
|
||||
*/
|
||||
|
||||
.uk-tab-bottom {
|
||||
.hook-tab-bottom();
|
||||
}
|
||||
|
||||
.uk-tab-bottom > * > a {
|
||||
.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 {
|
||||
.hook-tab-left();
|
||||
}
|
||||
|
||||
.uk-tab-right {
|
||||
.hook-tab-right();
|
||||
}
|
||||
|
||||
.uk-tab-left > * > a {
|
||||
justify-content: left;
|
||||
.hook-tab-left-item();
|
||||
}
|
||||
|
||||
.uk-tab-right > * > a {
|
||||
justify-content: left;
|
||||
.hook-tab-right-item();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-tab-misc();
|
||||
|
||||
.hook-tab() {}
|
||||
.hook-tab-item() {}
|
||||
.hook-tab-item-hover() {}
|
||||
.hook-tab-item-active() {}
|
||||
.hook-tab-item-disabled() {}
|
||||
.hook-tab-bottom() {}
|
||||
.hook-tab-bottom-item() {}
|
||||
.hook-tab-left() {}
|
||||
.hook-tab-left-item() {}
|
||||
.hook-tab-right() {}
|
||||
.hook-tab-right-item() {}
|
||||
.hook-tab-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-tab-item-color: @inverse-global-muted-color;
|
||||
@inverse-tab-item-hover-color: @inverse-global-color;
|
||||
@inverse-tab-item-active-color: @inverse-global-emphasis-color;
|
||||
@inverse-tab-item-disabled-color: @inverse-global-muted-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-tab {
|
||||
.hook-inverse-tab();
|
||||
}
|
||||
|
||||
.uk-tab > * > a {
|
||||
color: @inverse-tab-item-color;
|
||||
.hook-inverse-tab-item();
|
||||
}
|
||||
|
||||
.uk-tab > * > a:hover {
|
||||
color: @inverse-tab-item-hover-color;
|
||||
.hook-inverse-tab-item-hover();
|
||||
}
|
||||
|
||||
.uk-tab > .uk-active > a {
|
||||
color: @inverse-tab-item-active-color;
|
||||
.hook-inverse-tab-item-active();
|
||||
}
|
||||
|
||||
.uk-tab > .uk-disabled > a {
|
||||
color: @inverse-tab-item-disabled-color;
|
||||
.hook-inverse-tab-item-disabled();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-tab() {}
|
||||
.hook-inverse-tab-item() {}
|
||||
.hook-inverse-tab-item-hover() {}
|
||||
.hook-inverse-tab-item-active() {}
|
||||
.hook-inverse-tab-item-disabled() {}
|
||||
352
client/uikit/src/less/components/table.less
Normal file
352
client/uikit/src/less/components/table.less
Normal file
@@ -0,0 +1,352 @@
|
||||
// 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;
|
||||
|
||||
@table-cell-padding-vertical: 16px;
|
||||
@table-cell-padding-horizontal: 12px;
|
||||
|
||||
@table-header-cell-font-size: @global-font-size;
|
||||
@table-header-cell-font-weight: bold;
|
||||
@table-header-cell-color: @global-color;
|
||||
|
||||
@table-footer-font-size: @global-small-font-size;
|
||||
|
||||
@table-caption-font-size: @global-small-font-size;
|
||||
@table-caption-color: @global-muted-color;
|
||||
|
||||
@table-row-active-background: #ffd;
|
||||
|
||||
@table-divider-border-width: @global-border-width;
|
||||
@table-divider-border: @global-border;
|
||||
|
||||
@table-striped-row-background: @global-muted-background;
|
||||
|
||||
@table-hover-row-background: @table-row-active-background;
|
||||
|
||||
@table-small-cell-padding-vertical: 10px;
|
||||
@table-small-cell-padding-horizontal: 12px;
|
||||
|
||||
@table-large-cell-padding-vertical: 22px;
|
||||
@table-large-cell-padding-horizontal: 12px;
|
||||
|
||||
@table-expand-min-width: 150px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-table-header-cell();
|
||||
}
|
||||
|
||||
|
||||
/* Cell
|
||||
========================================================================== */
|
||||
|
||||
.uk-table td {
|
||||
padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
|
||||
vertical-align: top;
|
||||
.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;
|
||||
.hook-table-footer();
|
||||
}
|
||||
|
||||
|
||||
/* Caption
|
||||
========================================================================== */
|
||||
|
||||
.uk-table caption {
|
||||
font-size: @table-caption-font-size;
|
||||
text-align: left;
|
||||
color: @table-caption-color;
|
||||
.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;
|
||||
.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;
|
||||
.hook-table-striped();
|
||||
}
|
||||
|
||||
/*
|
||||
* Hover
|
||||
*/
|
||||
|
||||
.uk-table-hover > tr:hover,
|
||||
.uk-table-hover tbody tr:hover {
|
||||
background: @table-hover-row-background;
|
||||
.hook-table-hover();
|
||||
}
|
||||
|
||||
|
||||
/* Active state
|
||||
========================================================================== */
|
||||
|
||||
.uk-table > tr.uk-active,
|
||||
.uk-table tbody tr.uk-active {
|
||||
background: @table-row-active-background;
|
||||
.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;
|
||||
.hook-table-small();
|
||||
}
|
||||
|
||||
.uk-table-large th,
|
||||
.uk-table-large td {
|
||||
padding: @table-large-cell-padding-vertical @table-large-cell-padding-horizontal;
|
||||
.hook-table-large();
|
||||
}
|
||||
|
||||
|
||||
/* Justify modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-table-justify th:first-child,
|
||||
.uk-table-justify td:first-child { padding-left: 0; }
|
||||
|
||||
.uk-table-justify th:last-child,
|
||||
.uk-table-justify td:last-child { padding-right: 0; }
|
||||
|
||||
|
||||
/* Cell size modifier
|
||||
========================================================================== */
|
||||
|
||||
.uk-table-shrink { width: 1px; }
|
||||
.uk-table-expand { min-width: @table-expand-min-width; }
|
||||
|
||||
|
||||
/* Cell link modifier
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Does not work with `uk-table-justify` at the moment
|
||||
*/
|
||||
|
||||
.uk-table-link { padding: 0 !important; }
|
||||
|
||||
.uk-table-link > a {
|
||||
display: block;
|
||||
padding: @table-cell-padding-vertical @table-cell-padding-horizontal;
|
||||
}
|
||||
|
||||
.uk-table-small .uk-table-link > a { padding: @table-small-cell-padding-vertical @table-small-cell-padding-horizontal; }
|
||||
|
||||
|
||||
/* Responsive table
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/* Phone landscape and smaller */
|
||||
@media (max-width: @breakpoint-small-max) {
|
||||
|
||||
.uk-table-responsive,
|
||||
.uk-table-responsive tbody,
|
||||
.uk-table-responsive th,
|
||||
.uk-table-responsive td,
|
||||
.uk-table-responsive tr { display: block; }
|
||||
|
||||
.uk-table-responsive thead { display: none; }
|
||||
|
||||
.uk-table-responsive th,
|
||||
.uk-table-responsive td {
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
min-width: 0 !important;
|
||||
overflow: visible !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.uk-table-responsive th:not(:first-child):not(.uk-table-link),
|
||||
.uk-table-responsive td:not(:first-child):not(.uk-table-link),
|
||||
.uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round((@table-cell-padding-vertical / 3)) !important; }
|
||||
|
||||
.uk-table-responsive th:not(:last-child):not(.uk-table-link),
|
||||
.uk-table-responsive td:not(:last-child):not(.uk-table-link),
|
||||
.uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round((@table-cell-padding-vertical / 3)) !important; }
|
||||
|
||||
.uk-table-justify.uk-table-responsive th,
|
||||
.uk-table-justify.uk-table-responsive td {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-table-misc();
|
||||
|
||||
.hook-table() {}
|
||||
.hook-table-header-cell() {}
|
||||
.hook-table-cell() {}
|
||||
.hook-table-footer() {}
|
||||
.hook-table-caption() {}
|
||||
.hook-table-row-active() {}
|
||||
.hook-table-divider() {}
|
||||
.hook-table-striped() {}
|
||||
.hook-table-hover() {}
|
||||
.hook-table-small() {}
|
||||
.hook-table-large() {}
|
||||
.hook-table-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-table-header-cell-color: @inverse-global-color;
|
||||
@inverse-table-caption-color: @inverse-global-muted-color;
|
||||
@inverse-table-row-active-background: fadeout(@inverse-global-muted-background, 2%);
|
||||
@inverse-table-divider-border: @inverse-global-border;
|
||||
@inverse-table-striped-row-background: @inverse-global-muted-background;
|
||||
@inverse-table-hover-row-background: @inverse-table-row-active-background;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-table th {
|
||||
color: @inverse-table-header-cell-color;
|
||||
.hook-inverse-table-header-cell();
|
||||
}
|
||||
|
||||
.uk-table caption {
|
||||
color: @inverse-table-caption-color;
|
||||
.hook-inverse-table-caption();
|
||||
}
|
||||
|
||||
.uk-table > tr.uk-active,
|
||||
.uk-table tbody tr.uk-active {
|
||||
background: @inverse-table-row-active-background;
|
||||
.hook-inverse-table-row-active();
|
||||
}
|
||||
|
||||
.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-color: @inverse-table-divider-border;
|
||||
.hook-inverse-table-divider();
|
||||
}
|
||||
|
||||
.uk-table-striped > tr:nth-of-type(odd),
|
||||
.uk-table-striped tbody tr:nth-of-type(odd) {
|
||||
background: @inverse-table-striped-row-background;
|
||||
.hook-inverse-table-striped();
|
||||
}
|
||||
|
||||
.uk-table-hover > tr:hover,
|
||||
.uk-table-hover tbody tr:hover {
|
||||
background: @inverse-table-hover-row-background;
|
||||
.hook-inverse-table-hover();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-table-header-cell() {}
|
||||
.hook-inverse-table-caption() {}
|
||||
.hook-inverse-table-row-active() {}
|
||||
.hook-inverse-table-divider() {}
|
||||
.hook-inverse-table-striped() {}
|
||||
.hook-inverse-table-hover() {}
|
||||
301
client/uikit/src/less/components/text.less
Normal file
301
client/uikit/src/less/components/text.less
Normal file
@@ -0,0 +1,301 @@
|
||||
// Name: Text
|
||||
// Description: Utilities for text
|
||||
//
|
||||
// Component: `uk-text-*`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@text-lead-font-size: @global-large-font-size;
|
||||
@text-lead-line-height: 1.5;
|
||||
@text-lead-color: @global-emphasis-color;
|
||||
|
||||
@text-meta-font-size: @global-small-font-size;
|
||||
@text-meta-line-height: 1.4;
|
||||
@text-meta-color: @global-muted-color;
|
||||
|
||||
@text-small-font-size: @global-small-font-size;
|
||||
@text-small-line-height: 1.5;
|
||||
|
||||
@text-large-font-size: @global-large-font-size;
|
||||
@text-large-line-height: 1.5;
|
||||
|
||||
@text-muted-color: @global-muted-color;
|
||||
@text-emphasis-color: @global-emphasis-color;
|
||||
@text-primary-color: @global-primary-background;
|
||||
@text-secondary-color: @global-secondary-background;
|
||||
@text-success-color: @global-success-background;
|
||||
@text-warning-color: @global-warning-background;
|
||||
@text-danger-color: @global-danger-background;
|
||||
|
||||
@text-background-color: @global-primary-background;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Text
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/* Style modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-lead {
|
||||
font-size: @text-lead-font-size;
|
||||
line-height: @text-lead-line-height;
|
||||
color: @text-lead-color;
|
||||
.hook-text-lead();
|
||||
}
|
||||
|
||||
.uk-text-meta {
|
||||
font-size: @text-meta-font-size;
|
||||
line-height: @text-meta-line-height;
|
||||
color: @text-meta-color;
|
||||
.hook-text-meta();
|
||||
}
|
||||
|
||||
|
||||
/* Size modifiers
|
||||
========================================================================== */
|
||||
|
||||
.uk-text-small {
|
||||
font-size: @text-small-font-size;
|
||||
line-height: @text-small-line-height;
|
||||
.hook-text-small();
|
||||
}
|
||||
|
||||
.uk-text-large {
|
||||
font-size: @text-large-font-size;
|
||||
line-height: @text-large-line-height;
|
||||
.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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-text-misc();
|
||||
|
||||
.hook-text-lead() {}
|
||||
.hook-text-meta() {}
|
||||
.hook-text-small() {}
|
||||
.hook-text-large() {}
|
||||
.hook-text-background() {}
|
||||
.hook-text-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-text-lead-color: @inverse-global-color;
|
||||
@inverse-text-meta-color: @inverse-global-muted-color;
|
||||
@inverse-text-muted-color: @inverse-global-muted-color;
|
||||
@inverse-text-emphasis-color: @inverse-global-emphasis-color;
|
||||
@inverse-text-primary-color: @inverse-global-primary-background;
|
||||
@inverse-text-secondary-color: @inverse-global-primary-background;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-text-lead {
|
||||
color: @inverse-text-lead-color;
|
||||
.hook-inverse-text-lead();
|
||||
}
|
||||
|
||||
.uk-text-meta {
|
||||
color: @inverse-text-meta-color;
|
||||
.hook-inverse-text-meta();
|
||||
}
|
||||
|
||||
.uk-text-muted { color: @inverse-text-muted-color !important; }
|
||||
.uk-text-emphasis { color: @inverse-text-emphasis-color !important; }
|
||||
.uk-text-primary { color: @inverse-text-primary-color !important; }
|
||||
.uk-text-secondary { color: @inverse-text-secondary-color !important; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-text-lead() {}
|
||||
.hook-inverse-text-meta() {}
|
||||
133
client/uikit/src/less/components/thumbnav.less
Normal file
133
client/uikit/src/less/components/thumbnav.less
Normal file
@@ -0,0 +1,133 @@
|
||||
// Name: Thumbnav
|
||||
// Description: Component to create thumbnail navigations
|
||||
//
|
||||
// Component: `uk-thumbnav`
|
||||
//
|
||||
// Modifier: `uk-thumbnav-vertical`
|
||||
//
|
||||
// States: `uk-active`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@thumbnav-margin-horizontal: 15px;
|
||||
@thumbnav-margin-vertical: @thumbnav-margin-horizontal;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-thumbnav-item();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-thumbnav > * > :hover {
|
||||
.hook-thumbnav-item-hover();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.uk-thumbnav > .uk-active > * {
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-thumbnav-misc();
|
||||
|
||||
.hook-thumbnav() {}
|
||||
.hook-thumbnav-item() {}
|
||||
.hook-thumbnav-item-hover() {}
|
||||
.hook-thumbnav-item-active() {}
|
||||
.hook-thumbnav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-thumbnav > * > * {
|
||||
.hook-inverse-thumbnav-item();
|
||||
}
|
||||
|
||||
.uk-thumbnav > * > :hover {
|
||||
.hook-inverse-thumbnav-item-hover();
|
||||
}
|
||||
|
||||
.uk-thumbnav > .uk-active > * {
|
||||
.hook-inverse-thumbnav-item-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-thumbnav-item() {}
|
||||
.hook-inverse-thumbnav-item-hover() {}
|
||||
.hook-inverse-thumbnav-item-active() {}
|
||||
233
client/uikit/src/less/components/tile.less
Normal file
233
client/uikit/src/less/components/tile.less
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;
|
||||
@tile-padding-horizontal-s: @global-gutter;
|
||||
@tile-padding-horizontal-m: @global-medium-gutter;
|
||||
@tile-padding-vertical: @global-medium-margin;
|
||||
@tile-padding-vertical-m: @global-large-margin;
|
||||
|
||||
@tile-xsmall-padding-vertical: @global-margin;
|
||||
|
||||
@tile-small-padding-vertical: @global-medium-margin;
|
||||
|
||||
@tile-large-padding-vertical: @global-large-margin;
|
||||
@tile-large-padding-vertical-m: @global-xlarge-margin;
|
||||
|
||||
@tile-xlarge-padding-vertical: @global-xlarge-margin;
|
||||
@tile-xlarge-padding-vertical-m: (@global-large-margin + @global-xlarge-margin);
|
||||
|
||||
@tile-default-background: @global-background;
|
||||
|
||||
@tile-muted-background: @global-muted-background;
|
||||
|
||||
@tile-primary-background: @global-primary-background;
|
||||
@tile-primary-color-mode: light;
|
||||
|
||||
@tile-secondary-background: @global-secondary-background;
|
||||
@tile-secondary-color-mode: light;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.hook-tile-default();
|
||||
}
|
||||
|
||||
.uk-tile-default.uk-tile-hover:hover {
|
||||
.hook-tile-default-hover();
|
||||
}
|
||||
|
||||
/*
|
||||
* Muted
|
||||
*/
|
||||
|
||||
.uk-tile-muted {
|
||||
background-color: @tile-muted-background;
|
||||
.hook-tile-muted();
|
||||
}
|
||||
|
||||
.uk-tile-muted.uk-tile-hover:hover {
|
||||
.hook-tile-muted-hover();
|
||||
}
|
||||
|
||||
/*
|
||||
* Primary
|
||||
*/
|
||||
|
||||
.uk-tile-primary {
|
||||
background-color: @tile-primary-background;
|
||||
.hook-tile-primary();
|
||||
}
|
||||
|
||||
.uk-tile-primary.uk-tile-hover:hover {
|
||||
.hook-tile-primary-hover();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-primary-color-mode = light) {}
|
||||
.uk-tile-primary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-primary-color-mode = dark) {}
|
||||
|
||||
/*
|
||||
* Secondary
|
||||
*/
|
||||
|
||||
.uk-tile-secondary {
|
||||
background-color: @tile-secondary-background;
|
||||
.hook-tile-secondary();
|
||||
}
|
||||
|
||||
.uk-tile-secondary.uk-tile-hover:hover {
|
||||
.hook-tile-secondary-hover();
|
||||
}
|
||||
|
||||
// Color Mode
|
||||
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-light all) when (@tile-secondary-color-mode = light) {}
|
||||
.uk-tile-secondary:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-secondary-color-mode = dark) {}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-tile-misc();
|
||||
|
||||
.hook-tile() {}
|
||||
.hook-tile-default() {}
|
||||
.hook-tile-default-hover() {}
|
||||
.hook-tile-muted() {}
|
||||
.hook-tile-muted-hover() {}
|
||||
.hook-tile-primary() {}
|
||||
.hook-tile-primary-hover() {}
|
||||
.hook-tile-secondary() {}
|
||||
.hook-tile-secondary-hover() {}
|
||||
.hook-tile-misc() {}
|
||||
87
client/uikit/src/less/components/tooltip.less
Normal file
87
client/uikit/src/less/components/tooltip.less
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;
|
||||
@tooltip-max-width: 200px;
|
||||
@tooltip-padding-vertical: 3px;
|
||||
@tooltip-padding-horizontal: 6px;
|
||||
@tooltip-background: #666;
|
||||
@tooltip-border-radius: 2px;
|
||||
@tooltip-color: @global-inverse-color;
|
||||
@tooltip-font-size: 12px;
|
||||
|
||||
@tooltip-margin: 10px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-tooltip-misc();
|
||||
|
||||
.hook-tooltip() {}
|
||||
.hook-tooltip-misc() {}
|
||||
86
client/uikit/src/less/components/totop.less
Normal file
86
client/uikit/src/less/components/totop.less
Normal file
@@ -0,0 +1,86 @@
|
||||
// Name: Totop
|
||||
// Description: Component to create an icon to scroll back to top
|
||||
//
|
||||
// Component: `uk-totop`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@totop-padding: 5px;
|
||||
@totop-color: @global-muted-color;
|
||||
|
||||
@totop-hover-color: @global-color;
|
||||
|
||||
@totop-active-color: @global-emphasis-color;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
Component: Totop
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addopts `uk-icon`
|
||||
*/
|
||||
|
||||
.uk-totop {
|
||||
padding: @totop-padding;
|
||||
color: @totop-color;
|
||||
.hook-totop();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-totop:hover {
|
||||
color: @totop-hover-color;
|
||||
.hook-totop-hover();
|
||||
}
|
||||
|
||||
/* OnClick */
|
||||
.uk-totop:active {
|
||||
color: @totop-active-color;
|
||||
.hook-totop-active();
|
||||
}
|
||||
|
||||
|
||||
// Hooks
|
||||
// ========================================================================
|
||||
|
||||
.hook-totop-misc();
|
||||
|
||||
.hook-totop() {}
|
||||
.hook-totop-hover() {}
|
||||
.hook-totop-active() {}
|
||||
.hook-totop-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-totop-color: @inverse-global-muted-color;
|
||||
@inverse-totop-hover-color: @inverse-global-color;
|
||||
@inverse-totop-active-color: @inverse-global-emphasis-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-totop {
|
||||
color: @inverse-totop-color;
|
||||
.hook-inverse-totop();
|
||||
}
|
||||
|
||||
.uk-totop:hover {
|
||||
color: @inverse-totop-hover-color;
|
||||
.hook-inverse-totop-hover();
|
||||
}
|
||||
|
||||
.uk-totop:active {
|
||||
color: @inverse-totop-active-color;
|
||||
.hook-inverse-totop-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-totop() {}
|
||||
.hook-inverse-totop-hover() {}
|
||||
.hook-inverse-totop-active() {}
|
||||
165
client/uikit/src/less/components/transition.less
Normal file
165
client/uikit/src/less/components/transition.less
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;
|
||||
|
||||
@transition-scale: 1.03;
|
||||
|
||||
@transition-slide-small-translate: 10px;
|
||||
@transition-slide-medium-translate: 50px;
|
||||
|
||||
@transition-slow-duration: 0.7s;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-transition-misc();
|
||||
|
||||
.hook-transition-misc() {}
|
||||
510
client/uikit/src/less/components/utility.less
Normal file
510
client/uikit/src/less/components/utility.less
Normal file
@@ -0,0 +1,510 @@
|
||||
// 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;
|
||||
@panel-scrollable-padding: 10px;
|
||||
@panel-scrollable-border-width: @global-border-width;
|
||||
@panel-scrollable-border: @global-border;
|
||||
|
||||
@border-rounded-border-radius: 5px;
|
||||
|
||||
@box-shadow-duration: 0.1s;
|
||||
|
||||
@box-shadow-bottom-height: 30px;
|
||||
@box-shadow-bottom-bottom: -@box-shadow-bottom-height;
|
||||
@box-shadow-bottom-border-radius: 100%;
|
||||
@box-shadow-bottom-background: #444;
|
||||
@box-shadow-bottom-blur: 20px;
|
||||
|
||||
@dropcap-margin-right: 10px;
|
||||
@dropcap-font-size: ((@global-line-height * 3) * 1em);
|
||||
|
||||
@logo-font-size: @global-large-font-size;
|
||||
@logo-font-family: @global-font-family;
|
||||
@logo-color: @global-emphasis-color;
|
||||
@logo-hover-color: @global-emphasis-color;
|
||||
|
||||
@dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3);
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
.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;
|
||||
.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;
|
||||
.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;
|
||||
.hook-logo();
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.uk-logo:hover {
|
||||
color: @logo-hover-color;
|
||||
/* 1 */
|
||||
text-decoration: none;
|
||||
.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
|
||||
// ========================================================================
|
||||
|
||||
.hook-utility-misc();
|
||||
|
||||
.hook-panel-scrollable() {}
|
||||
.hook-box-shadow-bottom() {}
|
||||
.hook-dropcap() {}
|
||||
.hook-logo() {}
|
||||
.hook-logo-hover() {}
|
||||
.hook-utility-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-logo-color: @inverse-global-emphasis-color;
|
||||
@inverse-logo-hover-color: @inverse-global-emphasis-color;
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-dropcap::first-letter,
|
||||
.uk-dropcap p:first-of-type::first-letter {
|
||||
.hook-inverse-dropcap();
|
||||
}
|
||||
|
||||
.uk-logo {
|
||||
color: @inverse-logo-color;
|
||||
.hook-inverse-logo();
|
||||
}
|
||||
|
||||
.uk-logo:hover {
|
||||
color: @inverse-logo-hover-color;
|
||||
.hook-inverse-logo-hover();
|
||||
}
|
||||
|
||||
.uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
|
||||
.uk-logo-inverse { display: block; }
|
||||
|
||||
}
|
||||
|
||||
.hook-inverse-dropcap() {}
|
||||
.hook-inverse-logo() {}
|
||||
.hook-inverse-logo-hover() {}
|
||||
123
client/uikit/src/less/components/variables.less
Normal file
123
client/uikit/src/less/components/variables.less
Normal file
@@ -0,0 +1,123 @@
|
||||
//
|
||||
// Component: Variables
|
||||
// Description: Defines common values which are used across all components
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Load deprecated components
|
||||
// ========================================================================
|
||||
|
||||
@deprecated: false;
|
||||
|
||||
|
||||
// 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; // Phone landscape
|
||||
@breakpoint-medium: 960px; // Tablet Landscape
|
||||
@breakpoint-large: 1200px; // Desktop
|
||||
@breakpoint-xlarge: 1600px; // Large Screens
|
||||
|
||||
@breakpoint-xsmall-max: (@breakpoint-small - 1);
|
||||
@breakpoint-small-max: (@breakpoint-medium - 1);
|
||||
@breakpoint-medium-max: (@breakpoint-large - 1);
|
||||
@breakpoint-large-max: (@breakpoint-xlarge - 1);
|
||||
|
||||
|
||||
// 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";
|
||||
@global-font-size: 16px;
|
||||
@global-line-height: 1.5; // 24px
|
||||
|
||||
@global-2xlarge-font-size: 2.625rem; // 42px
|
||||
@global-xlarge-font-size: 2rem; // 32px
|
||||
@global-large-font-size: 1.5rem; // 24px
|
||||
@global-medium-font-size: 1.25rem; // 20px
|
||||
@global-small-font-size: 0.875rem; // 14px
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
@global-color: #666;
|
||||
@global-emphasis-color: #333;
|
||||
@global-muted-color: #999;
|
||||
|
||||
@global-link-color: #1e87f0;
|
||||
@global-link-hover-color: #0f6ecd;
|
||||
|
||||
@global-inverse-color: #fff;
|
||||
|
||||
//
|
||||
// Backgrounds
|
||||
//
|
||||
|
||||
@global-background: #fff;
|
||||
|
||||
@global-muted-background: #f8f8f8;
|
||||
@global-primary-background: #1e87f0;
|
||||
@global-secondary-background: #222;
|
||||
|
||||
@global-success-background: #32d296;
|
||||
@global-warning-background: #faa05a;
|
||||
@global-danger-background: #f0506e;
|
||||
|
||||
//
|
||||
// Borders
|
||||
//
|
||||
|
||||
@global-border-width: 1px;
|
||||
@global-border: #e5e5e5;
|
||||
|
||||
//
|
||||
// Box-Shadows
|
||||
//
|
||||
|
||||
@global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
@global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08);
|
||||
@global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16);
|
||||
@global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16);
|
||||
|
||||
//
|
||||
// Spacings
|
||||
//
|
||||
|
||||
// Used in margin, section, list
|
||||
@global-margin: 20px;
|
||||
@global-small-margin: 10px;
|
||||
@global-medium-margin: 40px;
|
||||
@global-large-margin: 70px;
|
||||
@global-xlarge-margin: 140px;
|
||||
|
||||
// Used in grid, column, container, align, card, padding
|
||||
@global-gutter: 30px;
|
||||
@global-small-gutter: 15px;
|
||||
@global-medium-gutter: 40px;
|
||||
@global-large-gutter: 70px;
|
||||
|
||||
//
|
||||
// Controls
|
||||
//
|
||||
|
||||
@global-control-height: 40px;
|
||||
@global-control-small-height: 30px;
|
||||
@global-control-large-height: 55px;
|
||||
|
||||
//
|
||||
// Z-index
|
||||
//
|
||||
|
||||
@global-z-index: 1000;
|
||||
146
client/uikit/src/less/components/visibility.less
Normal file
146
client/uikit/src/less/components/visibility.less
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
|
||||
// ========================================================================
|
||||
|
||||
.hook-visibility-misc();
|
||||
|
||||
.hook-visibility-misc() {}
|
||||
376
client/uikit/src/less/components/width.less
Normal file
376
client/uikit/src/less/components/width.less
Normal file
@@ -0,0 +1,376 @@
|
||||
// Name: Width
|
||||
// Description: Utilities for widths
|
||||
//
|
||||
// Component: `uk-child-width-*`
|
||||
// `uk-width-*`
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@width-small-width: 150px;
|
||||
@width-medium-width: 300px;
|
||||
@width-large-width: 450px;
|
||||
@width-xlarge-width: 600px;
|
||||
@width-2xlarge-width: 750px;
|
||||
|
||||
|
||||
/* ========================================================================
|
||||
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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'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: ~'calc(100% * 1 / 3.001)'; }
|
||||
.uk-width-2-3 { width: ~'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: ~'calc(100% * 1 / 6.001)'; }
|
||||
.uk-width-5-6 { width: ~'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; }
|
||||
.uk-width-xxlarge when (@deprecated = true) { 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: ~'calc(100% * 1 / 3.001)'; }
|
||||
.uk-width-2-3\@s { width: ~'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: ~'calc(100% * 1 / 6.001)'; }
|
||||
.uk-width-5-6\@s { width: ~'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; }
|
||||
.uk-width-xxlarge\@s when (@deprecated = true) { 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: ~'calc(100% * 1 / 3.001)'; }
|
||||
.uk-width-2-3\@m { width: ~'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: ~'calc(100% * 1 / 6.001)'; }
|
||||
.uk-width-5-6\@m { width: ~'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; }
|
||||
.uk-width-xxlarge\@m when (@deprecated = true) { 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: ~'calc(100% * 1 / 3.001)'; }
|
||||
.uk-width-2-3\@l { width: ~'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: ~'calc(100% * 1 / 6.001)'; }
|
||||
.uk-width-5-6\@l { width: ~'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; }
|
||||
.uk-width-xxlarge\@l when (@deprecated = true) { 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: ~'calc(100% * 1 / 3.001)'; }
|
||||
.uk-width-2-3\@xl { width: ~'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: ~'calc(100% * 1 / 6.001)'; }
|
||||
.uk-width-5-6\@xl { width: ~'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; }
|
||||
.uk-width-xxlarge\@xl when (@deprecated = true) { 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
|
||||
// ========================================================================
|
||||
|
||||
.hook-width-misc();
|
||||
|
||||
.hook-width-misc() {}
|
||||
81
client/uikit/src/less/theme/_import.less
vendored
Normal file
81
client/uikit/src/less/theme/_import.less
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
// Base
|
||||
@import "variables.less";
|
||||
@import "base.less";
|
||||
|
||||
// Elements
|
||||
@import "link.less";
|
||||
@import "heading.less";
|
||||
@import "divider.less";
|
||||
@import "list.less";
|
||||
@import "description-list.less";
|
||||
@import "table.less";
|
||||
@import "icon.less";
|
||||
@import "form-range.less";
|
||||
@import "form.less";
|
||||
@import "button.less";
|
||||
@import "progress.less";
|
||||
|
||||
// Layout
|
||||
@import "section.less";
|
||||
@import "container.less";
|
||||
@import "tile.less";
|
||||
@import "card.less";
|
||||
|
||||
// Common
|
||||
@import "close.less";
|
||||
@import "spinner.less";
|
||||
@import "marker.less";
|
||||
@import "totop.less";
|
||||
@import "alert.less";
|
||||
@import "placeholder.less";
|
||||
@import "badge.less";
|
||||
@import "label.less";
|
||||
@import "overlay.less";
|
||||
@import "article.less";
|
||||
@import "comment.less";
|
||||
@import "search.less";
|
||||
|
||||
// JavaScript
|
||||
@import "accordion.less";
|
||||
@import "drop.less";
|
||||
@import "dropdown.less";
|
||||
@import "modal.less";
|
||||
@import "slider.less";
|
||||
@import "sticky.less";
|
||||
@import "offcanvas.less";
|
||||
@import "leader.less";
|
||||
@import "notification.less";
|
||||
@import "tooltip.less";
|
||||
@import "sortable.less";
|
||||
@import "countdown.less";
|
||||
|
||||
@import "grid.less";
|
||||
|
||||
// Navs
|
||||
@import "nav.less";
|
||||
@import "navbar.less";
|
||||
@import "subnav.less";
|
||||
@import "breadcrumb.less";
|
||||
@import "pagination.less";
|
||||
@import "tab.less";
|
||||
@import "slidenav.less";
|
||||
@import "dotnav.less";
|
||||
@import "thumbnav.less";
|
||||
@import "iconnav.less";
|
||||
|
||||
@import "lightbox.less";
|
||||
|
||||
// Utilities
|
||||
@import "animation.less";
|
||||
@import "width.less";
|
||||
@import "height.less";
|
||||
@import "text.less";
|
||||
@import "column.less";
|
||||
@import "background.less";
|
||||
@import "align.less";
|
||||
@import "utility.less";
|
||||
@import "margin.less";
|
||||
@import "padding.less";
|
||||
@import "position.less";
|
||||
@import "transition.less";
|
||||
@import "inverse.less";
|
||||
82
client/uikit/src/less/theme/accordion.less
Normal file
82
client/uikit/src/less/theme/accordion.less
Normal file
@@ -0,0 +1,82 @@
|
||||
//
|
||||
// Component: Accordion
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@accordion-icon-margin-left: 10px;
|
||||
@accordion-icon-color: @global-color;
|
||||
@internal-accordion-open-image: "../../images/backgrounds/accordion-open.svg";
|
||||
@internal-accordion-close-image: "../../images/backgrounds/accordion-close.svg";
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion() {}
|
||||
|
||||
|
||||
// Item
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion-item() {}
|
||||
|
||||
|
||||
// Title
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion-title() {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: (@accordion-title-line-height * 1em);
|
||||
height: (@accordion-title-line-height * 1em);
|
||||
margin-left: @accordion-icon-margin-left;
|
||||
float: right;
|
||||
.svg-fill(@internal-accordion-close-image, "#000", @accordion-icon-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.uk-open > &::before { .svg-fill(@internal-accordion-open-image, "#000", @accordion-icon-color); }
|
||||
|
||||
}
|
||||
|
||||
.hook-accordion-title-hover() {}
|
||||
|
||||
|
||||
// Content
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion-content() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-accordion-misc() {}
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-accordion-item() {}
|
||||
|
||||
.hook-inverse-accordion-title() {}
|
||||
.hook-inverse-accordion-title-hover() {}
|
||||
|
||||
.hook-inverse() {
|
||||
|
||||
.uk-accordion-title::before { .svg-fill(@internal-accordion-close-image, "#000", @inverse-global-color); }
|
||||
|
||||
.uk-open > .uk-accordion-title::before { .svg-fill(@internal-accordion-open-image, "#000", @inverse-global-color); }
|
||||
|
||||
}
|
||||
76
client/uikit/src/less/theme/alert.less
Normal file
76
client/uikit/src/less/theme/alert.less
Normal file
@@ -0,0 +1,76 @@
|
||||
//
|
||||
// Component: Alert
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@alert-close-opacity: 0.4;
|
||||
@alert-close-hover-opacity: 0.8;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-alert() {}
|
||||
|
||||
|
||||
// Close
|
||||
// ========================================================================
|
||||
|
||||
.hook-alert-close() {
|
||||
color: inherit;
|
||||
opacity: @alert-close-opacity;
|
||||
}
|
||||
|
||||
.hook-alert-close-hover() {
|
||||
color: inherit;
|
||||
opacity: @alert-close-hover-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Style modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-alert-primary() {}
|
||||
|
||||
.hook-alert-success() {}
|
||||
|
||||
.hook-alert-warning() {}
|
||||
|
||||
.hook-alert-danger() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-alert-misc() {
|
||||
|
||||
/*
|
||||
* Content
|
||||
*/
|
||||
|
||||
.uk-alert h1,
|
||||
.uk-alert h2,
|
||||
.uk-alert h3,
|
||||
.uk-alert h4,
|
||||
.uk-alert h5,
|
||||
.uk-alert h6 { color: inherit; }
|
||||
|
||||
.uk-alert a:not([class]) {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.uk-alert a:not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
14
client/uikit/src/less/theme/align.less
Normal file
14
client/uikit/src/less/theme/align.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Align
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-align-misc() {}
|
||||
14
client/uikit/src/less/theme/animation.less
Normal file
14
client/uikit/src/less/theme/animation.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Animation
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-animation-misc() {}
|
||||
60
client/uikit/src/less/theme/article.less
Normal file
60
client/uikit/src/less/theme/article.less
Normal file
@@ -0,0 +1,60 @@
|
||||
//
|
||||
// Component: Article
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@article-meta-link-color: @article-meta-color;
|
||||
@article-meta-link-hover-color: @global-color;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-article() {}
|
||||
|
||||
|
||||
// Adjacent sibling
|
||||
// ========================================================================
|
||||
|
||||
.hook-article-adjacent() {}
|
||||
|
||||
|
||||
// Title
|
||||
// ========================================================================
|
||||
|
||||
.hook-article-title() {}
|
||||
|
||||
|
||||
// Meta
|
||||
// ========================================================================
|
||||
|
||||
.hook-article-meta() {
|
||||
|
||||
a { color: @article-meta-link-color; }
|
||||
|
||||
a:hover {
|
||||
color: @article-meta-link-hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-article-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-article-meta() {}
|
||||
14
client/uikit/src/less/theme/background.less
Normal file
14
client/uikit/src/less/theme/background.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Background
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-background-misc() {}
|
||||
29
client/uikit/src/less/theme/badge.less
Normal file
29
client/uikit/src/less/theme/badge.less
Normal file
@@ -0,0 +1,29 @@
|
||||
//
|
||||
// Component: Badge
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-badge() {}
|
||||
|
||||
.hook-badge-hover() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-badge-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-badge() {}
|
||||
.hook-inverse-badge-hover() {}
|
||||
134
client/uikit/src/less/theme/base.less
Normal file
134
client/uikit/src/less/theme/base.less
Normal file
@@ -0,0 +1,134 @@
|
||||
//
|
||||
// Component: Base
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@base-code-padding-horizontal: 6px;
|
||||
@base-code-padding-vertical: 2px;
|
||||
@base-code-background: @global-muted-background;
|
||||
|
||||
@base-blockquote-color: @global-emphasis-color;
|
||||
|
||||
@base-blockquote-footer-color: @global-color;
|
||||
|
||||
@base-pre-padding: 10px;
|
||||
@base-pre-background: @global-background;
|
||||
@base-pre-border-width: @global-border-width;
|
||||
@base-pre-border: @global-border;
|
||||
@base-pre-border-radius: 3px;
|
||||
|
||||
|
||||
// Body
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-body() {}
|
||||
|
||||
|
||||
// Links
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-link() {}
|
||||
|
||||
.hook-base-link-hover() {}
|
||||
|
||||
|
||||
// Text-level semantics
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-code() {
|
||||
padding: @base-code-padding-vertical @base-code-padding-horizontal;
|
||||
background: @base-code-background;
|
||||
}
|
||||
|
||||
|
||||
// Headings
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-heading() {}
|
||||
|
||||
.hook-base-h1() {}
|
||||
|
||||
.hook-base-h2() {}
|
||||
|
||||
.hook-base-h3() {}
|
||||
|
||||
.hook-base-h4() {}
|
||||
|
||||
.hook-base-h5() {}
|
||||
|
||||
.hook-base-h6() {}
|
||||
|
||||
|
||||
// Horizontal rules
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-hr() {}
|
||||
|
||||
|
||||
// Blockquotes
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-blockquote() {
|
||||
color: @base-blockquote-color;
|
||||
}
|
||||
|
||||
.hook-base-blockquote-footer() {
|
||||
|
||||
color: @base-blockquote-footer-color;
|
||||
|
||||
&::before { content: "— "; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Preformatted text
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-pre() {
|
||||
padding: @base-pre-padding;
|
||||
border: @base-pre-border-width solid @base-pre-border;
|
||||
border-radius: @base-pre-border-radius;
|
||||
background: @base-pre-background;
|
||||
}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-base-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-base-blockquote-color: @inverse-global-emphasis-color;
|
||||
@inverse-base-blockquote-footer-color: @inverse-global-color;
|
||||
|
||||
.hook-inverse-base-link() {}
|
||||
.hook-inverse-base-link-hover() {}
|
||||
|
||||
.hook-inverse-base-code() {
|
||||
background: @inverse-global-muted-background;
|
||||
}
|
||||
|
||||
.hook-inverse-base-heading() {}
|
||||
|
||||
.hook-inverse-base-h1() {}
|
||||
.hook-inverse-base-h2() {}
|
||||
.hook-inverse-base-h3() {}
|
||||
.hook-inverse-base-h4() {}
|
||||
.hook-inverse-base-h5() {}
|
||||
.hook-inverse-base-h6() {}
|
||||
|
||||
.hook-inverse-base-blockquote() { color: @inverse-base-blockquote-color; }
|
||||
.hook-inverse-base-blockquote-footer() { color: @inverse-base-blockquote-footer-color; }
|
||||
|
||||
.hook-inverse-base-hr() {}
|
||||
45
client/uikit/src/less/theme/breadcrumb.less
Normal file
45
client/uikit/src/less/theme/breadcrumb.less
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Component: Breadcrumb
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-breadcrumb() {}
|
||||
|
||||
|
||||
// Items
|
||||
// ========================================================================
|
||||
|
||||
.hook-breadcrumb-item() {}
|
||||
|
||||
.hook-breadcrumb-item-hover() {}
|
||||
|
||||
.hook-breadcrumb-item-disabled() {}
|
||||
|
||||
.hook-breadcrumb-item-active() {}
|
||||
|
||||
.hook-breadcrumb-divider() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-breadcrumb-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-breadcrumb-item() {}
|
||||
.hook-inverse-breadcrumb-item-hover() {}
|
||||
.hook-inverse-breadcrumb-item-disabled() {}
|
||||
.hook-inverse-breadcrumb-item-active() {}
|
||||
|
||||
.hook-inverse-breadcrumb-divider() {}
|
||||
211
client/uikit/src/less/theme/button.less
Normal file
211
client/uikit/src/less/theme/button.less
Normal file
@@ -0,0 +1,211 @@
|
||||
//
|
||||
// Component: Button
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@button-line-height: @global-control-height - (@button-border-width * 2);
|
||||
@button-small-line-height: @global-control-small-height - (@button-border-width * 2);
|
||||
@button-large-line-height: @global-control-large-height - (@button-border-width * 2);
|
||||
|
||||
@button-font-size: @global-small-font-size;
|
||||
@button-large-font-size: @global-small-font-size;
|
||||
|
||||
@button-default-background: transparent;
|
||||
@button-default-hover-background: transparent;
|
||||
@button-default-active-background: transparent;
|
||||
|
||||
@button-disabled-background: transparent;
|
||||
|
||||
@button-text-hover-color: @global-emphasis-color;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@button-text-transform: uppercase;
|
||||
|
||||
@button-border-width: @global-border-width;
|
||||
|
||||
@button-default-border: @global-border;
|
||||
@button-default-hover-border: darken(@global-border, 20%);
|
||||
@button-default-active-border: darken(@global-border, 30%);
|
||||
|
||||
@button-disabled-border: @global-border;
|
||||
|
||||
@button-text-border-width: @global-border-width;
|
||||
@button-text-border: @button-text-hover-color;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-button() {
|
||||
text-transform: @button-text-transform;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-property: color, background-color, border-color;
|
||||
}
|
||||
|
||||
.hook-button-hover() {}
|
||||
|
||||
.hook-button-active() {}
|
||||
|
||||
|
||||
// Style modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-default() { border: @button-border-width solid @button-default-border; }
|
||||
|
||||
.hook-button-default-hover() { border-color: @button-default-hover-border; }
|
||||
|
||||
.hook-button-default-active() { border-color: @button-default-active-border; }
|
||||
|
||||
//
|
||||
// Primary
|
||||
//
|
||||
|
||||
.hook-button-primary() { border: @button-border-width solid transparent; }
|
||||
|
||||
.hook-button-primary-hover() {}
|
||||
|
||||
.hook-button-primary-active() {}
|
||||
|
||||
//
|
||||
// Secondary
|
||||
//
|
||||
|
||||
.hook-button-secondary() { border: @button-border-width solid transparent; }
|
||||
|
||||
.hook-button-secondary-hover() {}
|
||||
|
||||
.hook-button-secondary-active() {}
|
||||
|
||||
//
|
||||
// Danger
|
||||
//
|
||||
|
||||
.hook-button-danger() { border: @button-border-width solid transparent; }
|
||||
|
||||
.hook-button-danger-hover() {}
|
||||
|
||||
.hook-button-danger-active() {}
|
||||
|
||||
|
||||
// Disabled
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-disabled() { border-color: @button-disabled-border; }
|
||||
|
||||
|
||||
// Size modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-small() {}
|
||||
|
||||
.hook-button-large() {}
|
||||
|
||||
|
||||
// Text modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-text() {
|
||||
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 100%;
|
||||
border-bottom: @button-text-border-width solid @button-text-border;
|
||||
transition: right 0.3s ease-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hook-button-text-hover() {
|
||||
|
||||
&::before { right: 0; }
|
||||
|
||||
}
|
||||
|
||||
.hook-button-text-disabled() {
|
||||
|
||||
&::before { display: none; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Link modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-link() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-button-misc() {
|
||||
|
||||
/* Group
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Collapse border
|
||||
*/
|
||||
|
||||
.uk-button-group > .uk-button:nth-child(n+2),
|
||||
.uk-button-group > div:nth-child(n+2) .uk-button { margin-left: -@button-border-width; }
|
||||
|
||||
/*
|
||||
* Create position context to superimpose the successor elements border
|
||||
* Known issue: If you use an `a` element as button and an icon inside,
|
||||
* the active state will not work if you click the icon inside the button
|
||||
* Workaround: Just use a `button` or `input` element as button
|
||||
*/
|
||||
|
||||
.uk-button-group .uk-button:hover,
|
||||
.uk-button-group .uk-button:active,
|
||||
.uk-button-group .uk-button.uk-active {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-button-default-background: transparent;
|
||||
@inverse-button-default-color: @inverse-global-emphasis-color;
|
||||
@inverse-button-default-hover-background: transparent;
|
||||
@inverse-button-default-hover-color: @inverse-global-emphasis-color;
|
||||
@inverse-button-default-active-background: transparent;
|
||||
@inverse-button-default-active-color: @inverse-global-emphasis-color;
|
||||
|
||||
@inverse-button-text-hover-color: @inverse-global-emphasis-color;
|
||||
|
||||
.hook-inverse-button-default() { border-color: @inverse-global-color; }
|
||||
.hook-inverse-button-default-hover() { border-color: @inverse-global-emphasis-color; }
|
||||
.hook-inverse-button-default-active() { border-color: @inverse-global-emphasis-color; }
|
||||
|
||||
.hook-inverse-button-primary() {}
|
||||
.hook-inverse-button-primary-hover() {}
|
||||
.hook-inverse-button-primary-active() {}
|
||||
|
||||
.hook-inverse-button-secondary() {}
|
||||
.hook-inverse-button-secondary-hover() {}
|
||||
.hook-inverse-button-secondary-active() {}
|
||||
|
||||
.hook-inverse-button-text() {
|
||||
&::before { border-bottom-color: @inverse-global-emphasis-color; }
|
||||
}
|
||||
.hook-inverse-button-text-hover() {}
|
||||
.hook-inverse-button-text-disabled() {}
|
||||
|
||||
.hook-inverse-button-link() {}
|
||||
223
client/uikit/src/less/theme/card.less
Normal file
223
client/uikit/src/less/theme/card.less
Normal file
@@ -0,0 +1,223 @@
|
||||
//
|
||||
// Component: Card
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@card-hover-background: @global-background;
|
||||
|
||||
@card-default-background: @global-background;
|
||||
@card-default-hover-background: @card-default-background;
|
||||
|
||||
@card-primary-hover-background: @card-primary-background;
|
||||
|
||||
@card-secondary-hover-background: @card-secondary-background;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@card-badge-border-radius: 2px;
|
||||
@card-badge-text-transform: uppercase;
|
||||
|
||||
@card-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-default-box-shadow: @global-medium-box-shadow;
|
||||
@card-default-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-default-header-border-width: @global-border-width;
|
||||
@card-default-header-border: @global-border;
|
||||
|
||||
@card-default-footer-border-width: @global-border-width;
|
||||
@card-default-footer-border: @global-border;
|
||||
|
||||
@card-primary-box-shadow: @global-medium-box-shadow;
|
||||
@card-primary-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
@card-secondary-box-shadow: @global-medium-box-shadow;
|
||||
@card-secondary-hover-box-shadow: @global-large-box-shadow;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-card() { transition: box-shadow 0.1s ease-in-out; }
|
||||
|
||||
|
||||
// Sections
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-body() {}
|
||||
|
||||
.hook-card-header() {}
|
||||
|
||||
.hook-card-footer() {}
|
||||
|
||||
|
||||
// Media
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-media() {}
|
||||
|
||||
.hook-card-media-top() {}
|
||||
|
||||
.hook-card-media-bottom() {}
|
||||
|
||||
.hook-card-media-left() {}
|
||||
|
||||
.hook-card-media-right() {}
|
||||
|
||||
|
||||
// Title
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-title() {}
|
||||
|
||||
|
||||
// Badge
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-badge() {
|
||||
border-radius: @card-badge-border-radius;
|
||||
text-transform: @card-badge-text-transform;
|
||||
}
|
||||
|
||||
|
||||
// Hover modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-hover() { box-shadow: @card-hover-box-shadow; }
|
||||
|
||||
|
||||
// Style modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-default() { box-shadow: @card-default-box-shadow; }
|
||||
|
||||
.hook-card-default-title() {}
|
||||
|
||||
.hook-card-default-hover() { box-shadow: @card-default-hover-box-shadow; }
|
||||
|
||||
.hook-card-default-header() { border-bottom: @card-default-header-border-width solid @card-default-header-border; }
|
||||
|
||||
.hook-card-default-footer() { border-top: @card-default-footer-border-width solid @card-default-footer-border; }
|
||||
|
||||
//
|
||||
// Primary
|
||||
//
|
||||
|
||||
.hook-card-primary() { box-shadow: @card-primary-box-shadow; }
|
||||
|
||||
.hook-card-primary-title() {}
|
||||
|
||||
.hook-card-primary-hover() { box-shadow: @card-primary-hover-box-shadow; }
|
||||
|
||||
//
|
||||
// Secondary
|
||||
//
|
||||
|
||||
.hook-card-secondary() { box-shadow: @card-secondary-box-shadow; }
|
||||
|
||||
.hook-card-secondary-title() {}
|
||||
|
||||
.hook-card-secondary-hover() { box-shadow: @card-secondary-hover-box-shadow; }
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-card-misc() {
|
||||
|
||||
/*
|
||||
* Default
|
||||
*/
|
||||
|
||||
.uk-card-body > .uk-nav-default {
|
||||
margin-left: -@card-body-padding-horizontal;
|
||||
margin-right: -@card-body-padding-horizontal;
|
||||
}
|
||||
.uk-card-body > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-body-padding-vertical + 15px);
|
||||
margin-bottom: (-@card-body-padding-vertical + 15px);
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default > li > a,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-body-padding-horizontal;
|
||||
padding-right: @card-body-padding-horizontal;
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-body-padding-horizontal; }
|
||||
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-card-body > .uk-nav-default {
|
||||
margin-left: -@card-body-padding-horizontal-l;
|
||||
margin-right: -@card-body-padding-horizontal-l;
|
||||
}
|
||||
.uk-card-body > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-body-padding-vertical-l + 15px);
|
||||
margin-bottom: (-@card-body-padding-vertical-l + 15px);
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default > li > a,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-body > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-body-padding-horizontal-l;
|
||||
padding-right: @card-body-padding-horizontal-l;
|
||||
}
|
||||
|
||||
.uk-card-body > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-body-padding-horizontal-l; }
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Small
|
||||
*/
|
||||
|
||||
.uk-card-small > .uk-nav-default {
|
||||
margin-left: -@card-small-body-padding-horizontal;
|
||||
margin-right: -@card-small-body-padding-horizontal;
|
||||
}
|
||||
.uk-card-small > .uk-nav-default:only-child {
|
||||
margin-top: (-@card-small-body-padding-vertical + 15px);
|
||||
margin-bottom: (-@card-small-body-padding-vertical + 15px);
|
||||
}
|
||||
|
||||
.uk-card-small > .uk-nav-default > li > a,
|
||||
.uk-card-small > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-small > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: @card-small-body-padding-horizontal;
|
||||
padding-right: @card-small-body-padding-horizontal;
|
||||
}
|
||||
|
||||
.uk-card-small > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left + @card-small-body-padding-horizontal; }
|
||||
|
||||
/*
|
||||
* Large
|
||||
*/
|
||||
|
||||
/* Desktop and bigger */
|
||||
@media (min-width: @breakpoint-large) {
|
||||
|
||||
.uk-card-large > .uk-nav-default { margin: 0; }
|
||||
.uk-card-large > .uk-nav-default:only-child { margin: 0; }
|
||||
|
||||
.uk-card-large > .uk-nav-default > li > a,
|
||||
.uk-card-large > .uk-nav-default .uk-nav-header,
|
||||
.uk-card-large > .uk-nav-default .uk-nav-divider {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.uk-card-large > .uk-nav-default .uk-nav-sub { padding-left: @nav-sublist-deeper-padding-left; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
32
client/uikit/src/less/theme/close.less
Normal file
32
client/uikit/src/less/theme/close.less
Normal file
@@ -0,0 +1,32 @@
|
||||
//
|
||||
// Component: Close
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-close() {
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-property: color, opacity;
|
||||
}
|
||||
|
||||
.hook-close-hover() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-close-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-close() {}
|
||||
.hook-inverse-close-hover() {}
|
||||
14
client/uikit/src/less/theme/column.less
Normal file
14
client/uikit/src/less/theme/column.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Column
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-column-misc() {}
|
||||
72
client/uikit/src/less/theme/comment.less
Normal file
72
client/uikit/src/less/theme/comment.less
Normal file
@@ -0,0 +1,72 @@
|
||||
//
|
||||
// Component: Comment
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@comment-primary-padding: @global-gutter;
|
||||
@comment-primary-background: @global-muted-background;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment() {}
|
||||
|
||||
|
||||
// Sections
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-body() {}
|
||||
|
||||
.hook-comment-header() {}
|
||||
|
||||
|
||||
// Title
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-title() {}
|
||||
|
||||
|
||||
// Meta
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-meta() {}
|
||||
|
||||
|
||||
// Avatar
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-avatar() {}
|
||||
|
||||
|
||||
// List
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-list-adjacent() {}
|
||||
|
||||
.hook-comment-list-sub() {}
|
||||
|
||||
.hook-comment-list-sub-adjacent() {}
|
||||
|
||||
|
||||
// Style modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-primary() {
|
||||
padding: @comment-primary-padding;
|
||||
background-color: @comment-primary-background;
|
||||
}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-comment-misc() {}
|
||||
14
client/uikit/src/less/theme/container.less
Normal file
14
client/uikit/src/less/theme/container.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Container
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-container-misc() {}
|
||||
53
client/uikit/src/less/theme/countdown.less
Normal file
53
client/uikit/src/less/theme/countdown.less
Normal file
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// Component: Countdown
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown() {}
|
||||
|
||||
|
||||
// Item
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-item() {}
|
||||
|
||||
|
||||
// Number
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-number() {}
|
||||
|
||||
|
||||
// Separator
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-separator() {}
|
||||
|
||||
|
||||
// Label
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-label() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-countdown-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-countdown-item() {}
|
||||
.hook-inverse-countdown-number() {}
|
||||
.hook-inverse-countdown-separator() {}
|
||||
.hook-inverse-countdown-label() {}
|
||||
36
client/uikit/src/less/theme/description-list.less
Normal file
36
client/uikit/src/less/theme/description-list.less
Normal file
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// Component: Description list
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@description-list-term-font-size: @global-small-font-size;
|
||||
@description-list-term-font-weight: normal;
|
||||
@description-list-term-text-transform: uppercase;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-description-list-term() {
|
||||
font-size: @description-list-term-font-size;
|
||||
font-weight: @description-list-term-font-weight;
|
||||
text-transform: @description-list-term-text-transform;
|
||||
}
|
||||
|
||||
.hook-description-list-description() {}
|
||||
|
||||
|
||||
// Style modifier
|
||||
// ========================================================================
|
||||
|
||||
.hook-description-list-divider-term() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-description-list-misc() {}
|
||||
49
client/uikit/src/less/theme/divider.less
Normal file
49
client/uikit/src/less/theme/divider.less
Normal file
@@ -0,0 +1,49 @@
|
||||
//
|
||||
// Component: Divider
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Icon
|
||||
// ========================================================================
|
||||
|
||||
.hook-divider-icon() {}
|
||||
|
||||
.hook-divider-icon-line() {}
|
||||
|
||||
.hook-divider-icon-line-left() {}
|
||||
|
||||
.hook-divider-icon-line-right() {}
|
||||
|
||||
|
||||
// Small
|
||||
// ========================================================================
|
||||
|
||||
.hook-divider-small() {}
|
||||
|
||||
|
||||
// Vertical
|
||||
// ========================================================================
|
||||
|
||||
.hook-divider-vertical() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-divider-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-divider-icon() {}
|
||||
.hook-inverse-divider-icon-line() {}
|
||||
|
||||
.hook-inverse-divider-small() {}
|
||||
|
||||
.hook-inverse-divider-vertical() {}
|
||||
57
client/uikit/src/less/theme/dotnav.less
Normal file
57
client/uikit/src/less/theme/dotnav.less
Normal file
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// Component: Dotnav
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@dotnav-item-background: transparent;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@dotnav-item-border-width: 1px;
|
||||
|
||||
@dotnav-item-border: fade(@global-color, 40%);
|
||||
@dotnav-item-hover-border: transparent;
|
||||
@dotnav-item-onclick-border: transparent;
|
||||
@dotnav-item-active-border: transparent;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-dotnav() {}
|
||||
|
||||
.hook-dotnav-item() {
|
||||
border: @dotnav-item-border-width solid @dotnav-item-border;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
.hook-dotnav-item-hover() { border-color: @dotnav-item-hover-border; }
|
||||
|
||||
.hook-dotnav-item-onclick() { border-color: @dotnav-item-onclick-border; }
|
||||
|
||||
.hook-dotnav-item-active() { border-color: @dotnav-item-active-border; }
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-dotnav-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-dotnav-item-background: transparent;
|
||||
|
||||
.hook-inverse-dotnav() {}
|
||||
.hook-inverse-dotnav-item() { border-color: fade(@inverse-global-color, 90%); }
|
||||
.hook-inverse-dotnav-item-hover() { border-color: transparent; }
|
||||
.hook-inverse-dotnav-item-onclick() { border-color: transparent; }
|
||||
.hook-inverse-dotnav-item-active() { border-color: transparent; }
|
||||
14
client/uikit/src/less/theme/drop.less
Normal file
14
client/uikit/src/less/theme/drop.less
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Component: Drop
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-drop-misc() {}
|
||||
45
client/uikit/src/less/theme/dropdown.less
Normal file
45
client/uikit/src/less/theme/dropdown.less
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Component: Dropdown
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@dropdown-padding: 25px;
|
||||
@dropdown-background: @global-background;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@dropdown-nav-font-size: @global-small-font-size;
|
||||
|
||||
@dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-dropdown() { box-shadow: @dropdown-box-shadow; }
|
||||
|
||||
|
||||
// Nav
|
||||
// ========================================================================
|
||||
|
||||
.hook-dropdown-nav() { font-size: @dropdown-nav-font-size; }
|
||||
|
||||
.hook-dropdown-nav-item() {}
|
||||
|
||||
.hook-dropdown-nav-item-hover() {}
|
||||
|
||||
.hook-dropdown-nav-header() {}
|
||||
|
||||
.hook-dropdown-nav-divider() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-dropdown-misc() {}
|
||||
45
client/uikit/src/less/theme/form-range.less
Normal file
45
client/uikit/src/less/theme/form-range.less
Normal file
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Component: Form Range
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@form-range-thumb-background: @global-background;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@form-range-thumb-border-width: @global-border-width;
|
||||
@form-range-thumb-border: darken(@global-border, 10%);
|
||||
|
||||
@form-range-track-border-radius: 500px;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-range() {}
|
||||
|
||||
|
||||
// Thumb
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-range-thumb() { border: @form-range-thumb-border-width solid @form-range-thumb-border; }
|
||||
|
||||
|
||||
// Track
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-range-track() { border-radius: @form-range-track-border-radius; }
|
||||
|
||||
.hook-form-range-track-focus() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-range-misc() {}
|
||||
146
client/uikit/src/less/theme/form.less
Normal file
146
client/uikit/src/less/theme/form.less
Normal file
@@ -0,0 +1,146 @@
|
||||
//
|
||||
// Component: Form
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
@form-line-height: @form-height - (2* @form-border-width);
|
||||
|
||||
@form-background: @global-background;
|
||||
@form-focus-background: @global-background;
|
||||
|
||||
@form-small-line-height: @form-small-height - (2* @form-border-width);
|
||||
@form-large-line-height: @form-large-height - (2* @form-border-width);
|
||||
|
||||
@form-radio-background: transparent;
|
||||
|
||||
@form-stacked-margin-bottom: 5px;
|
||||
|
||||
//
|
||||
// New
|
||||
//
|
||||
|
||||
@form-border-width: @global-border-width;
|
||||
@form-border: @global-border;
|
||||
|
||||
@form-focus-border: @global-primary-background;
|
||||
|
||||
@form-disabled-border: @global-border;
|
||||
|
||||
@form-danger-border: @global-danger-background;
|
||||
@form-success-border: @global-success-background;
|
||||
|
||||
@form-blank-focus-border: @global-border;
|
||||
@form-blank-focus-border-style: solid;
|
||||
|
||||
@form-radio-border-width: @global-border-width;
|
||||
@form-radio-border: darken(@global-border, 10%);
|
||||
|
||||
@form-radio-focus-border: @global-primary-background;
|
||||
|
||||
@form-radio-checked-border: transparent;
|
||||
|
||||
@form-radio-disabled-border: @global-border;
|
||||
|
||||
@form-label-color: @global-emphasis-color;
|
||||
@form-label-font-size: @global-small-font-size;
|
||||
|
||||
|
||||
// Component
|
||||
// ========================================================================
|
||||
|
||||
.hook-form() {
|
||||
border: @form-border-width solid @form-border;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: color, background-color, border;
|
||||
}
|
||||
|
||||
.hook-form-single-line() {}
|
||||
|
||||
.hook-form-multi-line() {}
|
||||
|
||||
.hook-form-focus() { border-color: @form-focus-border; }
|
||||
|
||||
.hook-form-disabled() { border-color: @form-disabled-border; }
|
||||
|
||||
|
||||
// Style modifiers
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-danger() { border-color: @form-danger-border; }
|
||||
|
||||
.hook-form-success() { border-color: @form-success-border; }
|
||||
|
||||
.hook-form-blank() { border-color: transparent; }
|
||||
|
||||
.hook-form-blank-focus() {
|
||||
border-color: @form-blank-focus-border;
|
||||
border-style: @form-blank-focus-border-style;
|
||||
}
|
||||
|
||||
|
||||
// Radio and checkbox
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-radio() {
|
||||
border: @form-radio-border-width solid @form-radio-border;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: background-color, border;
|
||||
}
|
||||
|
||||
.hook-form-radio-focus() { border-color: @form-radio-focus-border; }
|
||||
|
||||
.hook-form-radio-checked() { border-color: @form-radio-checked-border; }
|
||||
|
||||
.hook-form-radio-checked-focus() {}
|
||||
|
||||
.hook-form-radio-disabled() { border-color: @form-radio-disabled-border; }
|
||||
|
||||
|
||||
// Legend
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-legend() {}
|
||||
|
||||
|
||||
// Label
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-label() {
|
||||
color: @form-label-color;
|
||||
font-size: @form-label-font-size;
|
||||
}
|
||||
|
||||
|
||||
// Layout
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-stacked-label() {}
|
||||
|
||||
.hook-form-horizontal-label() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-form-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
@inverse-form-label-color: @inverse-global-emphasis-color;
|
||||
|
||||
.hook-inverse-form() { border-color: @inverse-global-border; }
|
||||
.hook-inverse-form-focus() { border-color: @inverse-global-color; }
|
||||
|
||||
.hook-inverse-form-radio() { border-color: @inverse-global-border; }
|
||||
.hook-inverse-form-radio-focus() { border-color: @inverse-global-color; }
|
||||
|
||||
.hook-inverse-form-radio-checked() { border-color: @inverse-global-color; }
|
||||
.hook-inverse-form-radio-checked-focus() {}
|
||||
|
||||
.hook-inverse-form-label() { color: @inverse-form-label-color; }
|
||||
28
client/uikit/src/less/theme/grid.less
Normal file
28
client/uikit/src/less/theme/grid.less
Normal file
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// Component: Grid
|
||||
//
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Variables
|
||||
// ========================================================================
|
||||
|
||||
|
||||
// Divider
|
||||
// ========================================================================
|
||||
|
||||
.hook-grid-divider-horizontal() {}
|
||||
.hook-grid-divider-vertical() {}
|
||||
|
||||
|
||||
// Miscellaneous
|
||||
// ========================================================================
|
||||
|
||||
.hook-grid-misc() {}
|
||||
|
||||
|
||||
// Inverse
|
||||
// ========================================================================
|
||||
|
||||
.hook-inverse-grid-divider-horizontal() {}
|
||||
.hook-inverse-grid-divider-vertical() {}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user