From 5b29aadb4a96cabece70fd76c03a4e7ca0351602 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 16 Jun 2022 19:44:05 +0300 Subject: [PATCH] Move deposit and linking to library css. Add less files --- css/import.css | 3 - css/structure/deposit.css | 11 -- css/structure/linking.css | 46 ----- less/_import.less | 64 ++++++ less/accordion.less | 0 less/alert.less | 42 ++++ less/align.less | 0 less/animation.less | 0 less/article.less | 0 less/background.less | 9 + less/badge.less | 0 less/base.less | 33 ++++ less/breadcrumb.less | 28 +++ less/button.less | 387 +++++++++++++++++++++++++++++++++++++ less/card.less | 100 ++++++++++ less/close.less | 2 + less/color.less | 48 +++++ less/column.less | 0 less/comment.less | 0 less/container.less | 0 less/countdown.less | 0 less/cover.less | 0 less/description-list.less | 0 less/divider.less | 0 less/dotnav.less | 13 ++ less/drop.less | 0 less/dropdown.less | 51 +++++ less/flex.less | 0 less/fonts.less | 56 ++++++ less/form-range.less | 0 less/form.less | 53 +++++ less/grid.less | 0 less/heading.less | 42 ++++ less/height.less | 14 ++ less/icon.less | 110 +++++++++++ less/iconnav.less | 0 less/input.less | 274 ++++++++++++++++++++++++++ less/inverse.less | 12 ++ less/label.less | 74 +++++++ less/leader.less | 0 less/lightbox.less | 0 less/link.less | 13 ++ less/list.less | 39 ++++ less/margin.less | 9 + less/marker.less | 0 less/mixin.less | 0 less/modal.less | 53 +++++ less/nav.less | 8 + less/navbar.less | 108 +++++++++++ less/notification.less | 52 +++++ less/offcanvas.less | 0 less/overlay.less | 0 less/padding.less | 0 less/pagination.less | 39 ++++ less/placeholder.less | 0 less/position.less | 0 less/print.less | 0 less/progress.less | 15 ++ less/search.less | 83 ++++++++ less/section.less | 5 + less/slidenav.less | 3 + less/slider.less | 0 less/slideshow.less | 0 less/sortable.less | 0 less/spinner.less | 0 less/stepper.less | 142 ++++++++++++++ less/sticky.less | 0 less/subnav.less | 106 ++++++++++ less/svg.less | 0 less/switcher.less | 0 less/tab.less | 30 +++ less/table.less | 0 less/text.less | 15 ++ less/thumbnav.less | 0 less/tile.less | 1 + less/tooltip.less | 13 ++ less/totop.less | 45 +++++ less/transition.less | 0 less/utility.less | 28 +++ less/variables.less | 63 ++++++ less/visibility.less | 0 less/width.less | 31 +++ 82 files changed, 2313 insertions(+), 60 deletions(-) delete mode 100644 css/structure/deposit.css delete mode 100644 css/structure/linking.css create mode 100644 less/_import.less create mode 100644 less/accordion.less create mode 100644 less/alert.less create mode 100644 less/align.less create mode 100644 less/animation.less create mode 100644 less/article.less create mode 100644 less/background.less create mode 100644 less/badge.less create mode 100644 less/base.less create mode 100644 less/breadcrumb.less create mode 100644 less/button.less create mode 100644 less/card.less create mode 100644 less/close.less create mode 100644 less/color.less create mode 100644 less/column.less create mode 100644 less/comment.less create mode 100644 less/container.less create mode 100644 less/countdown.less create mode 100644 less/cover.less create mode 100644 less/description-list.less create mode 100644 less/divider.less create mode 100644 less/dotnav.less create mode 100644 less/drop.less create mode 100644 less/dropdown.less create mode 100644 less/flex.less create mode 100644 less/fonts.less create mode 100644 less/form-range.less create mode 100644 less/form.less create mode 100644 less/grid.less create mode 100644 less/heading.less create mode 100644 less/height.less create mode 100644 less/icon.less create mode 100644 less/iconnav.less create mode 100644 less/input.less create mode 100644 less/inverse.less create mode 100644 less/label.less create mode 100644 less/leader.less create mode 100644 less/lightbox.less create mode 100644 less/link.less create mode 100644 less/list.less create mode 100644 less/margin.less create mode 100644 less/marker.less create mode 100644 less/mixin.less create mode 100644 less/modal.less create mode 100644 less/nav.less create mode 100644 less/navbar.less create mode 100644 less/notification.less create mode 100644 less/offcanvas.less create mode 100644 less/overlay.less create mode 100644 less/padding.less create mode 100644 less/pagination.less create mode 100644 less/placeholder.less create mode 100644 less/position.less create mode 100644 less/print.less create mode 100644 less/progress.less create mode 100644 less/search.less create mode 100644 less/section.less create mode 100644 less/slidenav.less create mode 100644 less/slider.less create mode 100644 less/slideshow.less create mode 100644 less/sortable.less create mode 100644 less/spinner.less create mode 100644 less/stepper.less create mode 100644 less/sticky.less create mode 100644 less/subnav.less create mode 100644 less/svg.less create mode 100644 less/switcher.less create mode 100644 less/tab.less create mode 100644 less/table.less create mode 100644 less/text.less create mode 100644 less/thumbnav.less create mode 100644 less/tile.less create mode 100644 less/tooltip.less create mode 100644 less/totop.less create mode 100644 less/transition.less create mode 100644 less/utility.less create mode 100644 less/variables.less create mode 100644 less/visibility.less create mode 100644 less/width.less diff --git a/css/import.css b/css/import.css index 62aaf9b..dd7eb44 100644 --- a/css/import.css +++ b/css/import.css @@ -9,7 +9,6 @@ @import "structure/breadcrumb.css"; @import "structure/button.css"; @import "structure/card.css"; -@import "structure/deposit.css"; @import "structure/dropdown.css"; @import "structure/height.css"; @import "structure/icon.css"; @@ -30,5 +29,3 @@ @import "structure/width.css"; @import "openaire.css"; - -@import "structure/linking.css"; diff --git a/css/structure/deposit.css b/css/structure/deposit.css deleted file mode 100644 index 13715c5..0000000 --- a/css/structure/deposit.css +++ /dev/null @@ -1,11 +0,0 @@ -.deposit { - /* Primary */ - --button-primary-background: var(--primary-color); - --button-primary-background-image: linear-gradient(251deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%); - --button-primary-color: var(--light-color); - --button-primary-border-color: transparent; - --button-primary-background-hover: var(--secondary-color); - --button-primary-background-image-hover: none; - --button-primary-color-hover: var(--light-color); - --button-primary-border-color-hover: transparent; -} \ No newline at end of file diff --git a/css/structure/linking.css b/css/structure/linking.css deleted file mode 100644 index 20e1ecf..0000000 --- a/css/structure/linking.css +++ /dev/null @@ -1,46 +0,0 @@ -:root { - --linking-basket-background: var(--primary-color); - --linking-next-step-disabled-background: var(--muted-color); - --linking-next-step-disabled-color: var(--disable-color); - --linking-next-step-active-background: var(--primary-color); - --linking-next-step-active-color: white; - --linking-result-button-selected-background: var(--secondary-color); - --linking-result-button-selected-color: white; - --linking-result-button-selected-border: var(--secondary-color); - --linking-result-button-enabled-background: white; - --linking-result-button-enabled-color: var(--primary-color); - --linking-result-button-enabled-border: var(--primary-color); -} - -.linkingBasket{ - background-color: var(--linking-basket-background) opacity 0.1; -} - -.nextStep.active{ - background-color: var(--linking-next-step-active-background); - color: var(--linking-next-step-active-color); - cursor: pointer; -} - -.nextStep.disabled{ - background-color: var(--linking-next-step-disabled-background); - color: var(--linking-next-step-disabled-color); -} -.community-card .uk-icon-button.selected, .claim-result-card .uk-icon-button.selected{ - background-color: var(--linking-result-button-selected-background); - color: var(--linking-result-button-selected-color) !important; - border-color: var(--linking-result-button-selected-border); - box-shadow: none; -} - -.community-card .uk-icon-button.enabled, .claim-result-card .uk-icon-button.enabled{ - background-color: var(--linking-result-button-enabled-background); - color: var(--linking-result-button-enabled-color) !important; - border:1px solid var(--linking-result-button-enabled-border); - box-shadow: none; -} - -.community-card .uk-icon-button{ - width: 34px; - height: 34px; -} diff --git a/less/_import.less b/less/_import.less new file mode 100644 index 0000000..9f39d34 --- /dev/null +++ b/less/_import.less @@ -0,0 +1,64 @@ +// Import UIKit core +@import "~uikit/src/less/uikit"; + +// Base +@import "fonts"; +@import "color"; +@import "variables"; +@import "base"; + +// Elements +@import "link"; +@import "heading"; +@import "list"; +@import "icon"; +@import "form"; +@import "button"; +@import "progress"; + +// Layout +@import "section"; +@import "tile"; +@import "card"; + +// Common +@import "close"; +@import "totop"; +@import "alert"; +@import "label"; +@import "search"; + +// JavaScript +//@import "accordion"; +//@import "drop"; +@import "dropdown"; +@import "modal"; +//@import "sticky"; +//@import "offcanvas"; +//@import "switcher"; +//@import "leader"; +@import "notification"; +@import "tooltip"; +//@import "sortable"; + +// Navs +@import "nav"; +@import "navbar"; +@import "subnav"; +@import "breadcrumb"; +@import "pagination"; +@import "tab"; +@import "slidenav"; +@import "dotnav"; + +// Utilities +@import "width"; +@import "height"; +@import "text"; +@import "background"; +@import "utility"; +@import "margin"; +@import "inverse"; + +// Extend +@import "stepper"; diff --git a/less/accordion.less b/less/accordion.less new file mode 100644 index 0000000..e69de29 diff --git a/less/alert.less b/less/alert.less new file mode 100644 index 0000000..1087544 --- /dev/null +++ b/less/alert.less @@ -0,0 +1,42 @@ +@alert-background: @global-inverse-color; +@alert-border: @global-emphasis-color; +@alert-border-width: 1px; +@alert-border-radius: @global-small-border-radius; +@alert-close-top: @alert-padding + 2px; + +@alert-primary-background: @info-background-color; +@alert-primary-color: @info-color; +@alert-primary-border: @info-border-color; + +@alert-success-background: @success-background-color; +@alert-success-color: @success-color; +@alert-success-border: @success-border-color; + +@alert-warning-background: @warning-background-color; +@alert-warning-color: @warning-color; +@alert-warning-border: @warning-border-color; + +@alert-danger-background: @danger-background-color; +@alert-danger-color: @danger-color; +@alert-danger-border: @danger-border-color; + +.hook-alert() { + border-radius: @alert-border-radius; + border: @alert-border-width solid @alert-border; +} + +.hook-alert-primary() { + border: @alert-border-width solid @alert-primary-border; +} + +.hook-alert-success() { + border: @alert-border-width solid @alert-success-border; +} + +.hook-alert-warning() { + border: @alert-border-width solid @alert-warning-border; +} + +.hook-alert-danger() { + border: @alert-border-width solid @alert-danger-border; +} diff --git a/less/align.less b/less/align.less new file mode 100644 index 0000000..e69de29 diff --git a/less/animation.less b/less/animation.less new file mode 100644 index 0000000..e69de29 diff --git a/less/article.less b/less/article.less new file mode 100644 index 0000000..e69de29 diff --git a/less/background.less b/less/background.less new file mode 100644 index 0000000..5816211 --- /dev/null +++ b/less/background.less @@ -0,0 +1,9 @@ +/** Secondary */ +@background-secondary-background: @global-color; +@background-color-opacity: @global-opacity; + +.hook-background-misc() { + .uk-background-primary-opacity { + background-color: fade(@background-primary-background, @background-color-opacity); + } +} diff --git a/less/badge.less b/less/badge.less new file mode 100644 index 0000000..e69de29 diff --git a/less/base.less b/less/base.less new file mode 100644 index 0000000..2270510 --- /dev/null +++ b/less/base.less @@ -0,0 +1,33 @@ +/** Strong */ +@base-strong-font-weight: 700; + +/** Mark */ +@base-mark-background: fade(@global-secondary-background, 50%); +@base-mark-color: @global-color; + +/* Heading*/ +@base-heading-font-weight: 600; + +/** H1, H2, H3, H4, H5, H6 */ +@base-h1-font-size-m: 66px; +@base-h1-font-size: 52px; +@base-h1-line-height: 1.25; +@base-h2-font-size-m: 52px; +@base-h2-font-size: 41px; +@base-h2-line-height: 1.25; +@base-h3-font-size: 41px; +@base-h3-line-height: 1.25; +@base-h4-font-size: 32px; +@base-h4-line-height: 1.25; +@base-h5-font-size: 26px; +@base-h5-line-height: 1.25; +@base-h6-font-size: 20px; +@base-h6-line-height: 1.34; + +/** Selection */ +@base-selection-background: @base-mark-background; +@base-selection-color: @base-mark-color; + +/* Inverse */ +@inverse-base-link-color: @global-inverse-color; +@inverse-base-link-hover-color: @global-inverse-color; diff --git a/less/breadcrumb.less b/less/breadcrumb.less new file mode 100644 index 0000000..660bb2a --- /dev/null +++ b/less/breadcrumb.less @@ -0,0 +1,28 @@ +/** Item*/ +@breadcrumb-item-color: @global-meta-color; +@breadcrumb-item-hover-color: @global-link-hover-color; +@breadcrumb-item-hover-text-decoration: underline; +@breadcrumb-item-active-color: @global-primary-background; + +/** Divider */ +@breadcrumb-divider: '\e5cc'; +@breadcrumb-divider-font-family: "Material Icons"; +@breadcrumb-divider-font-size: 20px; +@breadcrumb-divider-margin-horizontal: 10px; + +.hook-breadcrumb-item() { + vertical-align: super; + line-height: @breadcrumb-divider-font-size; +} + +.hook-breadcrumb-divider() { + font-family: @breadcrumb-divider-font-family; +} + +/** Inverse */ +@inverse-breadcrumb-divider-color: @global-background; +@inverse-breadcrumb-item-color: @global-background; +@inverse-breadcrumb-item-hover-color: @global-background; +@inverse-breadcrumb-item-active-color: @global-inverse-color; +@inverse-breadcrumb-item-disabled-color: fade(@global-background, 0.5); + diff --git a/less/button.less b/less/button.less new file mode 100644 index 0000000..1823b75 --- /dev/null +++ b/less/button.less @@ -0,0 +1,387 @@ +@button-font-size: @global-small-font-size; +@button-small-font-size: @global-small-font-size - 1px; +@button-large-font-size: @global-font-size; +@button-line-height: @global-control-small-height; +@button-large-line-height: @global-control-small-height; +@button-font-weight: 700; +@button-border-width: @global-border-width; +@button-text-transform: uppercase; +@button-border-radius: 500px; + +/* Default */ +@button-default-background: @global-background; +@button-default-color: @global-color; +@button-default-box-shadow: @global-medium-box-shadow; +@button-default-border: transparent; +@button-default-hover-background: @global-background; +@button-default-hover-color: @global-secondary-background; +@button-default-hover-box-shadow: @global-small-box-shadow; +@button-default-hover-border: transparent; +@button-default-active-background: @global-background; +@button-default-active-color: @global-secondary-background; +@button-default-active-box-shadow: @global-small-box-shadow; +@button-default-active-border: transparent; + +/* Primary */ +@button-primary-background: @global-primary-background; +@button-primary-background-gradient: @global-primary-gradient; +@button-primary-color: @global-inverse-color; +@button-primary-box-shadow: @global-medium-box-shadow; +@button-primary-border: transparent; +@button-primary-hover-background: @global-secondary-background; +@button-primary-hover-background-gradient: none; +@button-primary-hover-color: @global-inverse-color; +@button-primary-hover-box-shadow: @global-small-box-shadow; +@button-primary-hover-border: transparent; +@button-primary-active-background: @global-secondary-background; +@button-primary-active-background-gradient: none; +@button-primary-active-color: @global-inverse-color; +@button-primary-active-box-shadow: @global-small-box-shadow; +@button-primary-active-border: transparent; + +/* Secondary */ +@button-secondary-background: @global-background; +@button-secondary-background-gradient: none; +@button-secondary-color: @global-primary-background; +@button-secondary-box-shadow: @global-medium-box-shadow; +@button-secondary-border: @global-primary-background; +@button-secondary-hover-background: @global-primary-background; +@button-secondary-hover-background-gradient: @global-primary-gradient; +@button-secondary-hover-color: @global-inverse-color; +@button-secondary-hover-box-shadow: @global-small-box-shadow; +@button-secondary-hover-border: transparent; +@button-secondary-active-background: @global-primary-background; +@button-secondary-active-background-gradient: @global-primary-gradient; +@button-secondary-active-color: @global-inverse-color; +@button-secondary-active-box-shadow: @global-small-box-shadow; +@button-secondary-active-border: transparent; + +/* Danger */ +@button-danger-background: @global-danger-background; +@button-danger-background-gradient: none; +@button-danger-color: @global-inverse-color; +@button-danger-box-shadow: @global-medium-box-shadow; +@button-danger-border: @global-danger-background; +@button-danger-hover-background: @global-background; +@button-danger-hover-background-gradient: none; +@button-danger-hover-color: @global-danger-background; +@button-danger-hover-box-shadow: @global-small-box-shadow; +@button-danger-hover-border: @global-danger-background; +@button-danger-active-background: @global-background; +@button-danger-active-background-gradient: none; +@button-danger-active-color: @global-danger-background; +@button-danger-active-box-shadow: @global-small-box-shadow; +@button-danger-active-border: @global-danger-background; + +/* Text */ +@button-text-color: @global-primary-background; +@button-text-hover-color: @button-text-color; + +/* Link */ +@button-link-color: @global-primary-background; +@button-link-hover-color: @global-secondary-background; + +/* Disabled */ +@button-disabled-box-shadow: none; +@button-disabled-border: @global-border; + +.hook-button() { + font-weight: @button-font-weight; + text-transform: @button-text-transform; + border-radius: @button-border-radius; +} + +/* Default */ +.hook-button-default() { + box-shadow: @button-default-box-shadow; + border: @button-border-width solid @button-default-border; + background-origin: border-box; +} + +.hook-button-default-hover() { + box-shadow: @button-default-hover-box-shadow; + border: @button-border-width solid @button-default-hover-border; +} + +.hook-button-default-active() { + box-shadow: @button-default-active-box-shadow; + border: @button-border-width solid @button-default-active-border; +} + +/* Primary */ +.hook-button-primary() { + box-shadow: @button-primary-box-shadow; + border: @button-border-width solid @button-primary-border; + background-image: @button-primary-background-gradient; + background-origin: border-box; +} + +.hook-button-primary-hover() { + box-shadow: @button-primary-hover-box-shadow; + border: @button-border-width solid @button-primary-hover-border; + background-image: @button-primary-hover-background-gradient; +} + +.hook-button-primary-active() { + box-shadow: @button-primary-active-box-shadow; + border: @button-border-width solid @button-primary-active-border; + background-image: @button-primary-active-background-gradient; +} + +/* Secondary */ +.hook-button-secondary() { + box-shadow: @button-secondary-box-shadow; + border: @button-border-width solid @button-secondary-border; + background-image: @button-secondary-background-gradient; + background-origin: border-box; +} + +.hook-button-secondary-hover() { + box-shadow: @button-secondary-hover-box-shadow; + border: @button-border-width solid @button-secondary-hover-border; + background-image: @button-secondary-hover-background-gradient; +} + +.hook-button-secondary-active() { + box-shadow: @button-secondary-active-box-shadow; + border: @button-border-width solid @button-secondary-active-border; + background-image: @button-secondary-active-background-gradient; +} + +/* Danger */ +.hook-button-danger() { + box-shadow: @button-danger-box-shadow; + border: @button-border-width solid @button-danger-border; + background-image: @button-danger-background-gradient; + background-origin: border-box; +} + +.hook-button-danger-hover() { + box-shadow: @button-danger-hover-box-shadow; + border: @button-border-width solid @button-danger-hover-border; + background-image: @button-danger-hover-background-gradient; +} + +.hook-button-danger-active() { + box-shadow: @button-danger-active-box-shadow; + border: @button-border-width solid @button-danger-active-border; + background-image: @button-danger-active-background-gradient; +} + + +/* Text */ +.hook-button-text() { + padding: 0 30px 0 0; + border-radius: 0; + position: relative; + + &::before { + content: '\f1df'; + font-family: "Material Icons Round"; + font-size: 20px; + position: absolute; + top: 0; + right: 0; + transition: right linear 0.2s; + } + + &:hover::before { + right: -5px; + } +} + +/* Link */ +.hook-button-link() { + border-radius: 0; +} + +/* Disable */ +.hook-button-disabled() { + box-shadow: @button-disabled-box-shadow; + border: @button-border-width solid @button-disabled-border; + background-image: none; +} + +/* Inverse */ + +/* Default */ +@inverse-button-default-background: @global-background; +@inverse-button-default-color: @global-color; +@inverse-button-default-box-shadow: @inverse-global-medium-box-shadow; +@inverse-button-default-border: transparent; +@inverse-button-default-hover-background: @global-background; +@inverse-button-default-hover-color: @global-secondary-background; +@inverse-button-default-hover-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-default-hover-border: transparent; +@inverse-button-default-active-background: @global-background; +@inverse-button-default-active-color: @global-secondary-background; +@inverse-button-default-active-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-default-active-border: transparent; + +/* Primary */ +@inverse-button-primary-background: @global-primary-background; +@inverse-button-primary-background-gradient: @global-primary-gradient; +@inverse-button-primary-color: @global-inverse-color; +@inverse-button-primary-box-shadow: @inverse-global-medium-box-shadow; +@inverse-button-primary-border: transparent; +@inverse-button-primary-hover-background: @global-secondary-background; +@inverse-button-primary-hover-background-gradient: none; +@inverse-button-primary-hover-color: @global-inverse-color; +@inverse-button-primary-hover-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-primary-hover-border: transparent; +@inverse-button-primary-active-background: @global-secondary-background; +@inverse-button-primary-active-background-gradient: none; +@inverse-button-primary-active-color: @global-inverse-color; +@inverse-button-primary-active-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-primary-active-border: transparent; + +/* Secondary */ +@inverse-button-secondary-background: @global-background; +@inverse-button-secondary-background-gradient: none; +@inverse-button-secondary-color: @global-primary-background; +@inverse-button-secondary-box-shadow: @inverse-global-medium-box-shadow; +@inverse-button-secondary-border: @global-primary-background; +@inverse-button-secondary-hover-background: @global-primary-background; +@inverse-button-secondary-hover-background-gradient: @global-primary-gradient; +@inverse-button-secondary-hover-color: @global-inverse-color; +@inverse-button-secondary-hover-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-secondary-hover-border: transparent; +@inverse-button-secondary-active-background: @global-primary-background; +@inverse-button-secondary-active-background-gradient: @global-primary-gradient; +@inverse-button-secondary-active-color: @global-inverse-color; +@inverse-button-secondary-active-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-secondary-active-border: transparent; + +/* Danger */ +@inverse-button-danger-box-shadow: @inverse-global-medium-box-shadow; +@inverse-button-danger-hover-box-shadow: @inverse-global-small-box-shadow; +@inverse-button-danger-active-box-shadow: @inverse-global-small-box-shadow; + +/* Text */ +@inverse-button-text-color: @global-inverse-color; +@inverse-button-text-hover-color: @inverse-button-text-color; + +/* Link */ +@inverse-button-link-color: @global-inverse-color; +@inverse-button-link-hover-color: @global-inverse-color; +@inverse-button-link-hover-text-transform: underline; + +/* Disabled */ +@inverse-button-disabled-background: @global-inverse-color; +@inverse-button-disabled-box-shadow: none; +@inverse-button-disabled-border: @global-inverse-color; +@inverse-button-disabled-color: @global-muted-color; + + +/* Default */ +.hook-inverse-button-default() { + border-color: @inverse-button-default-border; + background-origin: border-box; +} + +.hook-inverse-button-default-hover() { + border-color: @inverse-button-default-hover-border; +} + +.hook-inverse-button-default-active() { + box-shadow: @inverse-button-default-active-box-shadow; + border-color: @inverse-button-default-active-border; +} + +/* Primary */ +.hook-inverse-button-primary() { + border-color: @inverse-button-primary-border; + background-image: @inverse-button-primary-background-gradient; + background-origin: border-box; +} + +.hook-inverse-button-primary-hover() { + border-color: @inverse-button-primary-hover-border; + background-image: @inverse-button-primary-hover-background-gradient; +} + +.hook-inverse-button-primary-active() { + border-color: @inverse-button-primary-active-border; + background-image: @inverse-button-primary-active-background-gradient; +} + +/* Secondary */ +.hook-inverse-button-secondary() { + border-color: @inverse-button-secondary-border; + background-image: @inverse-button-secondary-background-gradient; + background-origin: border-box; +} + +.hook-inverse-button-secondary-hover() { + border-color: @inverse-button-secondary-hover-border; + background-image: @inverse-button-secondary-hover-background-gradient; +} + +.hook-inverse-button-secondary-active() { + border-color: @inverse-button-secondary-active-border; + background-image: @inverse-button-secondary-active-background-gradient; +} + +.hook-inverse-misc() { + + /* Default */ + .uk-button-default { + box-shadow: @inverse-button-default-box-shadow; + + &:hover { + box-shadow: @inverse-button-default-hover-box-shadow; + } + + &:active { + box-shadow: @inverse-button-default-active-box-shadow; + } + } + + /* Primary */ + .uk-button-primary { + box-shadow: @inverse-button-primary-box-shadow; + + &:hover { + box-shadow: @inverse-button-primary-hover-box-shadow; + } + + &:active { + box-shadow: @inverse-button-primary-active-box-shadow; + } + } + + /* Secondary */ + .uk-button-secondary { + box-shadow: @inverse-button-secondary-box-shadow; + + &:hover { + box-shadow: @inverse-button-secondary-hover-box-shadow; + } + + &:active { + box-shadow: @inverse-button-secondary-active-box-shadow; + } + } + + /* Danger */ + .uk-button-danger { + box-shadow: @inverse-button-danger-box-shadow; + + &:hover { + box-shadow: @inverse-button-danger-hover-box-shadow; + } + + &:active { + box-shadow: @inverse-button-danger-active-box-shadow; + } + } + + /* Disable */ + .uk-button:disabled { + border-color: @inverse-button-disabled-border; + background-image: none; + background-color: @inverse-button-disabled-background; + color: @inverse-button-disabled-color; + box-shadow: @inverse-button-disabled-box-shadow; + } +} diff --git a/less/card.less b/less/card.less new file mode 100644 index 0000000..f5ed47d --- /dev/null +++ b/less/card.less @@ -0,0 +1,100 @@ +@card-border-radius: @global-border-radius; + +@card-default-background: @global-background; +@card-default-box-shadow: @global-large-box-shadow; +@card-default-hover-background: @card-default-background; +@card-default-hover-box-shadow: @global-medium-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-background: @global-primary-background; +@card-primary-background-gradient: @global-primary-gradient; +@card-primary-box-shadow: @global-large-box-shadow; +@card-primary-hover-background: @card-primary-background; +@card-primary-hover-box-shadow: @global-medium-box-shadow; +@card-primary-hover-background-gradient: @global-primary-gradient; + +@card-secondary-background: @global-muted-background; +@card-secondary-box-shadow: @global-large-box-shadow; +@card-secondary-color: @global-color; +@card-secondary-color-mode: dark; +@card-secondary-hover-background: @card-secondary-background; +@card-secondary-hover-box-shadow: @global-medium-box-shadow; + +.hook-card() { + transition: .1s ease-in-out; + transition-property: color,background-color,background-size,border-color,box-shadow,transform,top; + border-radius: @card-border-radius; +} + +.hook-card-header() { + border-radius: @card-border-radius @card-border-radius 0 0; +} + +.hook-card-footer() { + border-radius: 0 0 @card-border-radius @card-border-radius; +} + +.hook-card-default() { + box-shadow: @card-default-box-shadow; +} + +.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; +} + +.hook-card-primary() { + box-shadow: @card-primary-box-shadow; + background-image: @card-primary-background-gradient; +} + +.hook-card-primary-hover() { + box-shadow: @card-primary-hover-box-shadow; +} + +.hook-card-secondary() { + box-shadow: @card-secondary-box-shadow; +} + +.hook-card-secondary-hover() { + box-shadow: @card-secondary-hover-box-shadow; +} + +@inverse-card-box-shadow: @inverse-global-large-box-shadow; +@inverse-card-hover-box-shadow: @inverse-global-medium-box-shadow; + +.hook-inverse-misc() { + .uk-card-default { + box-shadow: @inverse-card-box-shadow; + + &.uk-card-hover:hover { + box-shadow: @inverse-card-hover-box-shadow; + } + } + + .uk-card-primary { + box-shadow: @inverse-card-box-shadow; + + &.uk-card-hover:hover { + box-shadow: @inverse-card-hover-box-shadow; + } + } + + .uk-card-secondary { + box-shadow: @inverse-card-box-shadow; + + &.uk-card-hover:hover { + box-shadow: @inverse-card-hover-box-shadow; + } + } +} diff --git a/less/close.less b/less/close.less new file mode 100644 index 0000000..765bac8 --- /dev/null +++ b/less/close.less @@ -0,0 +1,2 @@ +@close-color: @global-meta-color; +@close-hover-color: @global-link-hover-color; diff --git a/less/color.less b/less/color.less new file mode 100644 index 0000000..2366a78 --- /dev/null +++ b/less/color.less @@ -0,0 +1,48 @@ + @primary-color: #211F7E; + @primary-light-color: #4687E6; + @primary-dark-color: #1F2379; + @secondary-color: #3086ED; + + @dark-color: #000000; + @grey-color: #2C2C2C; + @placeholder-color: #8E8E8E; + @disable-color: #B3B3B3; + @muted-color: #EAEAEA; + @light-grey-color: #6E6E6E; + @light-color: #FFFFFF; + @table-color: #F5F5F5; + @default-color: #F9F9F9; + @light-blue: #F4F8F9; + @info-color: #095ABA; + @info-border-color: #2680EB; + @info-background-color: #F8FFFF; + @warning-color: #BD640D; + @warning-border-color: #E68619; + @warning-background-color: #FFFAF3; + @success-color: #107154; + @success-border-color: #2D9D78; + @success-background-color: #FCFFF5; + @danger-color: #BB121A; + @danger-border-color: #E34850; + @danger-background-color: #FFF6F6; + + /* Explore */ + @explore-color: #E96439; + @explore-light-color: #FF7A4E; + @explore-dark-color: #E96439; + /* Provide */ + @provide-color: #37C7E9; + /* Monitor */ + @monitor-color: #56A601; + @monitor-light-color: #8BCC00; + @monitor-dark-color: #228001; + /* Connect */ + @connect-color: #EBB13E; + @connect-light-color: #FECA1D; + @connect-dark-color: #FE9F1D; + /* Graph */ + @graph-color: #FA193E; + /* ORCID */ + @orcid-color: #A6CE39; + /* Argos */ + @argos-color: #17BEBB; diff --git a/less/column.less b/less/column.less new file mode 100644 index 0000000..e69de29 diff --git a/less/comment.less b/less/comment.less new file mode 100644 index 0000000..e69de29 diff --git a/less/container.less b/less/container.less new file mode 100644 index 0000000..e69de29 diff --git a/less/countdown.less b/less/countdown.less new file mode 100644 index 0000000..e69de29 diff --git a/less/cover.less b/less/cover.less new file mode 100644 index 0000000..e69de29 diff --git a/less/description-list.less b/less/description-list.less new file mode 100644 index 0000000..e69de29 diff --git a/less/divider.less b/less/divider.less new file mode 100644 index 0000000..e69de29 diff --git a/less/dotnav.less b/less/dotnav.less new file mode 100644 index 0000000..ec3dbb1 --- /dev/null +++ b/less/dotnav.less @@ -0,0 +1,13 @@ +@dotnav-margin-horizontal: 20px; +@dotnav-item-width: 16px; +@dotnav-item-background: fade(@global-primary-background, 50%); +@dotnav-item-hover-background: @global-primary-background; +@dotnav-item-onclick-background: @global-primary-background; +@dotnav-item-active-background: @global-primary-background; +@dotnav-item-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15), 1px 1px 1px #fff; + +.hook-dotnav-item() { + transition: .2s ease-in-out; + transition-property: color,background-color,border-color,box-shadow; + box-shadow: @dotnav-item-box-shadow; +} diff --git a/less/drop.less b/less/drop.less new file mode 100644 index 0000000..e69de29 diff --git a/less/dropdown.less b/less/dropdown.less new file mode 100644 index 0000000..d6dee51 --- /dev/null +++ b/less/dropdown.less @@ -0,0 +1,51 @@ +@dropdown-min-width: 260px; +@dropdown-padding: 5px 0; +@dropdown-background: @global-background; +@dropdown-border-width: @global-border-width; +@dropdown-border: @global-border; +@dropdown-border-radius: @global-border-radius; +@dropdown-box-shadow: @global-default-shadow; + +@dropdown-nav-font-size: @global-small-font-size; +@dropdown-nav-font-weight: 400; + +@dropdown-nav-item-padding-horizontal: 30px; +@dropdown-nav-item-padding-vertical: 5px; +@dropdown-nav-item-active-font-weight: 600; + +@dropdown-nav-item-color: @global-color; +@dropdown-nav-item-hover-color: @global-color; +@dropdown-nav-item-hover-background: @light-blue; + +@dropdown-nav-divider-margin: 5px; + +.hook-dropdown() { + box-shadow: @dropdown-box-shadow; + border: @dropdown-border-width solid @dropdown-border; + border-radius: @dropdown-border-radius; +} + +.hook-dropdown-nav() { + font-size: @dropdown-nav-font-size; + font-weight: @dropdown-nav-font-weight; +} + +.hook-dropdown-nav-item() { + &:extend(.uk-text-truncate); + display: inherit !important; + padding: @dropdown-nav-item-padding-vertical @dropdown-nav-item-padding-horizontal !important; +} + +.hook-dropdown-nav-item-hover() { + background-color: @dropdown-nav-item-hover-background; +} + +.hook-dropdown-nav-divider() { + margin: @dropdown-nav-divider-margin 0; +} + +.hook-dropdown-misc() { + .uk-dropdown-nav > li.uk-active > a { + font-weight: @dropdown-nav-item-active-font-weight; + } +} diff --git a/less/flex.less b/less/flex.less new file mode 100644 index 0000000..e69de29 diff --git a/less/fonts.less b/less/fonts.less new file mode 100644 index 0000000..c9eb26c --- /dev/null +++ b/less/fonts.less @@ -0,0 +1,56 @@ +/* Aileron */ + +@font-face { font-family: "aileron"; font-style: italic; font-weight: 100; src: url("../media/fonts/aileron/aileron-thinitalic.eot"); src: url("../media/fonts/aileron/aileron-thinitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thinitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thinitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-thinitalic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 100; src: url("../media/fonts/aileron/aileron-thin.eot"); src: url("../media/fonts/aileron/aileron-thin.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thin.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thin.woff") format('woff'), url("../media/fonts/aileron/aileron-thin.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: italic; font-weight: 300; src: url("../media/fonts/aileron/aileron-lightitalic.eot"); src: url("../media/fonts/aileron/aileron-lightitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-lightitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-lightitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-lightitalic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 300; src: url("../media/fonts/aileron/aileron-light.eot"); src: url("../media/fonts/aileron/aileron-light.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-light.woff2") format('woff2'), url("../media/fonts/aileron/aileron-light.woff") format('woff'), url("../media/fonts/aileron/aileron-light.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: italic; font-weight: 400; src: url("../media/fonts/aileron/aileron-italic.eot"); src: url("../media/fonts/aileron/aileron-italic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-italic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-italic.woff") format('woff'), url("../media/fonts/aileron/aileron-italic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 400; src: url("../media/fonts/aileron/aileron-regular.eot"); src: url("../media/fonts/aileron/aileron-regular.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-regular.woff2") format('woff2'), url("../media/fonts/aileron/aileron-regular.woff") format('woff'), url("../media/fonts/aileron/aileron-regular.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: italic; font-weight: 600; src: url("../media/fonts/aileron/aileron-semibolditalic.eot"); src: url("../media/fonts/aileron/aileron-semibolditalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-semibolditalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-semibolditalic.woff") format('woff'), url("../media/fonts/aileron/aileron-semibolditalic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 600; src: url("../media/fonts/aileron/aileron-semibold.eot"); src: url("../media/fonts/aileron/aileron-semibold.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-semibold.woff2") format('woff2'), url("../media/fonts/aileron/aileron-semibold.woff") format('woff'), url("../media/fonts/aileron/aileron-semibold.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: italic; font-weight: 700; src: url("../media/fonts/aileron/aileron-bolditalic.eot"); src: url("../media/fonts/aileron/aileron-bolditalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bolditalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bolditalic.woff") format('woff'), url("../media/fonts/aileron/aileron-bolditalic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 700; src: url("../media/fonts/aileron/aileron-bold.eot"); src: url("../media/fonts/aileron/aileron-bold.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bold.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bold.woff") format('woff'), url("../media/fonts/aileron/aileron-bold.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: italic; font-weight: 900; src: url("../media/fonts/aileron/aileron-blackitalic.eot"); src: url("../media/fonts/aileron/aileron-blackitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-blackitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-blackitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-blackitalic.ttf") format('truetype'); } +@font-face { font-family: "aileron"; font-style: normal; font-weight: 900; src: url("../media/fonts/aileron/aileron-black.eot"); src: url("../media/fonts/aileron/aileron-black.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-black.woff2") format('woff2'), url("../media/fonts/aileron/aileron-black.woff") format('woff'), url("../media/fonts/aileron/aileron-black.ttf") format('truetype'); } + +/* Material Icons */ + +@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; + src: url("../media/fonts/material-icons/MaterialIcons-Regular.eot"); + src: local('Material Icons'), local('MaterialIcons-Regular'), + url("../media/fonts/material-icons/MaterialIcons-Regular.woff2") format('woff2'), + url("../media/fonts/material-icons/MaterialIcons-Regular.woff") format('woff'), + url("../media/fonts/material-icons/MaterialIcons-Regular.ttf") format('truetype'); +} + +@font-face { font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; + src: url("../media/fonts/material-icons/MaterialIconsOutlined-Regular.eot"); + src: local('Material Icons Outlined'), local('MaterialIconsOutlined-Regular'), + url("../media/fonts/material-icons/MaterialIconsOutlined-Regular.woff2") format('woff2'), + url("../media/fonts/material-icons/MaterialIconsOutlined-Regular.woff") format('woff'), + url("../media/fonts/material-icons/MaterialIconsOutlined-Regular.ttf") format('truetype'); +} + +@font-face { font-family: 'Material Icons Round'; font-style: normal; font-weight: 400; + src: url("../media/fonts/material-icons/MaterialIconsRound-Regular.eot"); + src: local('Material Icons'), local('MaterialIconsRound-Regular'), + url("../media/fonts/material-icons/MaterialIconsRound-Regular.woff2") format('woff2'), + url("../media/fonts/material-icons/MaterialIconsRound-Regular.woff") format('woff'), + url("../media/fonts/material-icons/MaterialIconsRound-Regular.ttf") format('truetype'); +} + +@font-face { font-family: 'Material Icons Sharp'; font-style: normal; font-weight: 400; + src: url("../media/fonts/material-icons/MaterialIconsSharp-Regular.eot"); + src: local('Material Icons Sharp'), local('MaterialIconsSharp-Regular'), + url("../media/fonts/material-icons/MaterialIconsSharp-Regular.woff2") format('woff2'), + url("../media/fonts/material-icons/MaterialIconsSharp-Regular.woff") format('woff'), + url("../media/fonts/material-icons/MaterialIconsSharp-Regular.ttf") format('truetype'); +} + +@font-face { font-family: 'Material Icons Two Tone'; font-style: normal; font-weight: 400; + src: url("../media/fonts/material-icons/MaterialIconsTwoTone-Regular.eot"); + src: local('Material Icons Two Tone'), local('MaterialIconsTwoTone-Regular'), + url("../media/fonts/material-icons/MaterialIconsTwoTone-Regular.woff2") format('woff2'), + url("../media/fonts/material-icons/MaterialIconsTwoTone-Regular.woff") format('woff'), + url("../media/fonts/material-icons/MaterialIconsTwoTone-Regular.ttf") format('truetype'); +} diff --git a/less/form-range.less b/less/form-range.less new file mode 100644 index 0000000..e69de29 diff --git a/less/form.less b/less/form.less new file mode 100644 index 0000000..288b4d0 --- /dev/null +++ b/less/form.less @@ -0,0 +1,53 @@ +@form-padding-horizontal: 25px; +@form-radio-margin-top: -2px; +@form-background: @global-inverse-color; +@form-placeholder-color: @global-meta-color; +@form-border-radius: @global-border-radius; +@form-box-shadow: @global-inset-shadow; + +/** Radio - Checkbox*/ +@form-radio-background: @global-inverse-color; +@form-radio-focus-background: @global-inverse-color; +@form-radio-checked-background: @global-secondary-background; +@form-radio-checked-focus-background: @global-secondary-background; +@form-radio-border: @global-border; +@form-radio-border-width: @global-border-width; +@form-radio-border-radius: @global-small-border-radius; + +.hook-form() { + transition: .2s ease-in-out; + transition-property: color, background-color, border-color, box-shadow; + box-shadow: @form-box-shadow; + border-radius: @form-border-radius; +} + +.hook-form-radio() { + border-radius: @form-radio-border-radius; + border: @form-radio-border-width solid @form-radio-border; +} + +.hook-form-radio-checked() { + background-size: contain; +} + +.hook-form-misc() { + button, input[type="button"], input[type="checkbox"], + input[type="radio"], input[type="reset"], input[type="submit"], + label, select { + cursor: pointer; + } +} + +.hook-form-misc() { + [style*="visibility: hidden"] .input-wrapper { + opacity: 0; + } + + @import (multiple) 'input'; +} + +/** Inverse */ +.hook-inverse-misc() { + @import (multiple) 'input'; + @input-mode: @inverse-global-color-mode; +} diff --git a/less/grid.less b/less/grid.less new file mode 100644 index 0000000..e69de29 diff --git a/less/heading.less b/less/heading.less new file mode 100644 index 0000000..6aa9e69 --- /dev/null +++ b/less/heading.less @@ -0,0 +1,42 @@ +@heading-font-weight: 700; +@heading-line-height: 1.25; + +@heading-small-font-size-l: 74px; +@heading-small-font-weight: @heading-font-weight; +@heading-small-line-height: @heading-line-height; + +@heading-medium-font-size-l: 83px; +@heading-medium-font-weight: @heading-font-weight; +@heading-medium-line-height: @heading-line-height; + +@heading-large-font-size-l: 94px; +@heading-large-font-weight: @heading-font-weight; +@heading-large-line-height: @heading-line-height; + +@heading-xlarge-font-size-l: 119px; +@heading-xlarge-font-weight: @heading-font-weight; +@heading-xlarge-line-height: @heading-line-height; + +@heading-2xlarge-font-size-l: 133px; +@heading-2xlarge-font-weight: @heading-font-weight; +@heading-2xlarge-line-height: @heading-line-height; + +.hook-heading-small() { + font-weight: @heading-small-font-weight; +} + +.hook-heading-medium() { + font-weight: @heading-medium-font-weight; +} + +.hook-heading-large() { + font-weight: @heading-large-font-weight; +} + +.hook-heading-xlarge() { + font-weight: @heading-xlarge-font-weight; +} + +.hook-heading-2xlarge() { + font-weight: @heading-2xlarge-font-weight; +} diff --git a/less/height.less b/less/height.less new file mode 100644 index 0000000..11341dd --- /dev/null +++ b/less/height.less @@ -0,0 +1,14 @@ +@height-xsmall-height: 80px; +@height-small-height: 160px; +@height-medium-height: 320px; +@height-large-height: 480px; + +.hook-height-misc() { + .uk-height-xsmall { + height: @height-xsmall-height; + } + + .uk-height-max-xsmall { + max-height: @height-xsmall-height; + } +} diff --git a/less/icon.less b/less/icon.less new file mode 100644 index 0000000..22b5a1b --- /dev/null +++ b/less/icon.less @@ -0,0 +1,110 @@ +@icon-button-size: 48px; +@icon-bg-size: @icon-button-size; +@icon-bg-size-medium: @icon-button-size*1.5; +@icon-bg-size-large: @icon-button-size*2; + +@icon-button-background: @button-default-background; +@icon-button-color: @button-default-color; +@icon-button-hover-background: @button-default-hover-background; +@icon-button-hover-color: @button-default-hover-color; +@icon-button-active-background: @button-default-active-background; +@icon-button-active-color: @button-default-active-color; + +@icon-box-shadow: @global-medium-box-shadow; +@icon-hover-box-shadow: @global-small-box-shadow; + +@icon-type: { + outlined: Outlined; + round: Round; + sharp: Sharp; + two-tone: Two Tone; +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: @icon-image-size; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + background: inherit; + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: 'liga'; + + + each(@icon-type, { + &.@{key} { + font-family: 'Material Icons @{value}'; + } + }); +} + +.hook-icon-button() { + border: none; + box-shadow: @icon-box-shadow; + + &:disabled { + box-shadow: none; + background-image: none; + background-color: @global-muted-background; + color: @global-muted-color; + } +} + +.hook-icon-button-hover() { + box-shadow: @icon-hover-box-shadow; +} + +.hook-icon-misc() { + /* Default circle element for SVGs */ + .uk-icon-bg-shadow { + border-radius: 100px; + width: @icon-button-size; + height: @icon-button-size; + display: flex; + align-items: center; + justify-content: center; + box-shadow: @icon-box-shadow; + } + + .uk-icon-bg-shadow-medium { + width: @icon-bg-size-medium; + height: @icon-bg-size-medium; + } + + .uk-icon-bg-shadow-large { + width: @icon-bg-size-large; + height: @icon-bg-size-large; + } + /**/ +} + +/** Inverse */ +@inverse-icon-box-shadow: @inverse-global-medium-box-shadow; +@inverse-icon-hover-box-shadow: @inverse-global-small-box-shadow; + +.hook-inverse-misc() { + + .uk-icon-bg-shadow { + box-shadow: @inverse-icon-box-shadow; + } + + .uk-icon-button { + box-shadow: @inverse-icon-box-shadow; + + &:hover { + box-shadow: @inverse-icon-hover-box-shadow; + } + } +} diff --git a/less/iconnav.less b/less/iconnav.less new file mode 100644 index 0000000..e69de29 diff --git a/less/input.less b/less/input.less new file mode 100644 index 0000000..9663224 --- /dev/null +++ b/less/input.less @@ -0,0 +1,274 @@ +@input-mode: dark; + +.input-wrapper { + /* Basic Information */ + --input-placeholder-color: @global-meta-color; + --input-placeholder-weight: 400; + --input-hint-color: @global-meta-color; + --input-color: @global-color; + --input-border-radius: @global-border-radius; + /* Size modifiers */ + --input-padding-vertical: 12px; + --input-padding-horizontal: 25px; + --input-font-size: @global-font-size; + /* Styling */ + --input-background: transparent; + --input-shadow: none; + --input-border: transparent; + --input-border-width: @global-border-width; + --input-border-bottom: var(--input-border); + /* Hover Styling */ + --input-background-hover: var(--input-background); + --input-shadow-hover: var(--input-shadow); + --input-border-hover: var(--input-border); + --input-border-bottom-hover: var(--input-border-bottom); + /* Focus Styling */ + --input-background-focus: var(--input-background); + --input-shadow-focus: var(--input-shadow); + --input-border-focus: var(--input-border); + --input-border-bottom-focus: var(--input-border-bottom); + /* Disabled */ + --input-color-disabled: @global-muted-color; + /* Danger */ + --input-danger-color: @global-danger-background; +} + +/** Input Wrapper */ +[style*="visibility: hidden"] .input-wrapper { + opacity: 0; +} + +.input-wrapper { + border: var(--input-border-width) solid var(--input-border); + border-bottom: var(--input-border-width) solid var(--input-border-bottom); + border-radius: var(--input-border-radius); + + & > .input-box { + box-shadow: var(--input-shadow); + background: var(--input-background); + border-radius: var(--input-border-radius); + position: relative; + padding: calc(var(--input-padding-vertical) + 23px) 0 var(--input-padding-vertical) var(--input-padding-horizontal); + cursor: text; + color: var(--input-color); + + &.static { + padding-top: var(--input-padding-vertical); + } + + &.select { + cursor: pointer; + } + + & > .placeholder { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + overflow: hidden; + pointer-events: none; + color: var(--input-placeholder-color); + font-weight: var(--input-placeholder-weight); + + & > label { + position: absolute; + font-size: var(--input-font-size); + line-height: @global-line-height; + top: calc(var(--input-padding-vertical) + @global-line-height); + left: var(--input-padding-horizontal); + transform: translateY(-50%); + transition: all 0.5s ease 0s; + } + } + + & .input { + outline: 0 none !important; + box-shadow: none !important; + border-radius: 0; + border: 0 none; + padding: 0 var(--input-padding-horizontal) 0 0; + font-size: var(--input-font-size); + font-family: inherit; + background: transparent !important; + color: inherit; + width: 100%; + min-height: @global-line-height; + line-height: @global-line-height; + resize: none; + cursor: inherit; + + &textarea { + margin-top: 5px; + } + + &::placeholder, &.placeholder { + color: var(--input-placeholder-color); + opacity: 1; + } + + &:disabled { + background: transparent; + color: var(--input-color-disabled); + } + } + + & .uk-grid .input { + min-height: 27px; + } + + & .icon { + transition: all 0.3s linear 0s; + transform: var(--input-arrow-transform); + margin-right: var(--input-padding-horizontal); + } + + & > .tools { + padding-right: var(--input-padding-horizontal); + } + + & .chip { + max-width: calc(100% - var(--input-padding-horizontal)); + } + + & .more { + color: var(--input-hint-color); + font-size: var(--input-font-size); + } + + & .uk-grid .input, + & .uk-grid-margin .input, + & .uk-grid .more, + &:not(.static) .chip, + & .uk-grid-margin.chip { + margin-top: 10px; + } + } + + &:hover { + border: var(--input-border-width) solid var(--input-border-hover); + border-bottom: var(--input-border-width) solid var(--input-border-bottom-hover); + + & > .input-box { + box-shadow: var(--input-shadow-hover); + background: var(--input-background-hover); + } + } + + &.focused { + border: var(--input-border-width) solid var(--input-border-focus); + border-bottom: var(--input-border-width) solid var(--input-border-bottom-focus); + + & > .input-box { + box-shadow: var(--input-shadow-focus); + background: var(--input-background-focus); + } + } + + &.disabled { + & > .input-box { + cursor: not-allowed !important; + user-select: none; + } + + & > .input-box { + & .input::placeholder, & .placeholder { + color: var(--input-color-disabled); + } + } + } + + &.danger { + border: var(--input-border-width) solid var(--input-danger-color); + & > .input-box { + & .input::placeholder, & .placeholder { + color: var(--input-danger-color); + } + + & .icon { + color: var(--input-danger-color); + } + } + } + + &.hint { + & > .input-box { + & .input::placeholder { + color: var(--input-hint-color); + } + } + } + + &.active > .input-box > .placeholder > label, + &.focused > .input-box > .placeholder > label, + &.hint > .input-box > .placeholder > label { + top: calc(var(--input-padding-vertical) + 13px); + font-size: 12px; + line-height: 18px; + } + + & .uk-dropdown.options { + max-height: 216px; /* 34px each line height, 5+5 margin top+bottom, 1+1 border top+bottom */ + overflow: auto; + } + + &:not(.focused) > .input-box .input.search { + opacity: 0; + } + + /* Modifiers */ + &.inner { + --input-shadow: @global-inset-shadow; + --input-background: @global-inverse-color; + } + + &.flat { + --input-background: @global-inverse-color; + --input-border: @global-muted-background; + } + + &.border-bottom { + --input-border-radius: 0; + --input-border-bottom: @global-muted-background; + --input-padding-horizontal: 0; + --input-padding-vertical: 5px; + --input-border-bottom-focus: @global-color; + --input-font-size: 14px; + } + + &.search { + --input-font-size: 14px; + --input-padding-horizontal: 30px; + --input-padding-vertical: 20px; + } + + &.advanced-search { + --input-placeholder-weight: 700; + --input-placeholder-color: @global-color; + --input-border-radius: 54px; + --input-padding-horizontal: 30px; + --input-padding-vertical: 10px; + --input-font-size: 14px; + --input-background-hover: @global-muted-background; + --input-shadow-hover: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow); + --input-background-focus: @global-background; + --input-shadow-focus: if(@input-mode = dark, @global-medium-box-shadow, @inverse-global-medium-box-shadow); + } + + &.x-small { + --input-padding-horizontal: 15px; + --input-padding-vertical: 5px; + --input-font-size: 14px; + } + + &.small { + --input-padding-horizontal: 20px; + --input-padding-vertical: 10px; + --input-font-size: 14px; + } + + &.small-vertical { + --input-padding-vertical: 10px; + } +} + diff --git a/less/inverse.less b/less/inverse.less new file mode 100644 index 0000000..d95d993 --- /dev/null +++ b/less/inverse.less @@ -0,0 +1,12 @@ +/* Dark Background: Use hook-inverse-misc in order to add styles +in a dark background and use uk-light in a child */ + +.dark { + .hook-inverse-misc(); +} + +.hook-inverse() { + .hook-inverse-misc(); +} + +.hook-inverse-misc() {}; diff --git a/less/label.less b/less/label.less new file mode 100644 index 0000000..97e1441 --- /dev/null +++ b/less/label.less @@ -0,0 +1,74 @@ +@label-background: transparent; +@label-border: @global-border; +@label-border-width: @global-border-width; +@label-border-radius: 500px; +@label-color: @global-color; +@label-font-size: @global-small-font-size - 2px; +@label-font-weight: 400; +@label-line-height: 15px; +@label-padding-horizontal: 20px; +@label-padding-vertical: 10px; +@label-small-padding-horizontal: 10px; +@label-small-padding-vertical: 5px; +@label-text-transform: uppercase; + +/* Success */ +@label-success-background: transparent; +@label-success-border: @success-border-color; +@label-success-color: @success-color; + +/* Warning */ +@label-warning-background: transparent; +@label-warning-border: @warning-border-color; +@label-warning-color: @warning-color; + +/** Danger*/ +@label-danger-background: transparent; +@label-danger-border: @danger-border-color; +@label-danger-color: @danger-color; + +/** Primary */ +@label-primary-background: transparent; +@label-primary-border: @global-primary-background; +@label-primary-color: @global-primary-background; + +/** Secondary */ +@label-secondary-background: transparent; +@label-secondary-border: @global-secondary-background; +@label-secondary-color: @global-secondary-background; + +.hook-label() { + border: @label-border-width solid @label-border; + border-radius: @label-border-radius; + text-transform: @label-text-transform; + + &.uk-label-small { + padding: @label-small-padding-vertical @label-small-padding-horizontal; + } +} + +.hook-label-success { + border-color: @label-success-border; +} + +.hook-label-warning() { + border-color: @label-warning-border; +} + +.hook-label-danger() { + border-color: @label-danger-border; +} + +.hook-label-misc() { + .uk-label-primary { + background-color: @label-primary-background; + color: @label-primary-color; + border-color: @label-primary-border; + } + + .uk-label-secondary { + background-color: @label-secondary-background; + color: @label-secondary-color; + border-color: @label-secondary-border; + } +} diff --git a/less/leader.less b/less/leader.less new file mode 100644 index 0000000..e69de29 diff --git a/less/lightbox.less b/less/lightbox.less new file mode 100644 index 0000000..e69de29 diff --git a/less/link.less b/less/link.less new file mode 100644 index 0000000..9ccf171 --- /dev/null +++ b/less/link.less @@ -0,0 +1,13 @@ +/** Muted link*/ +@link-muted-hover-color: @global-link-hover-color; + +/** Text Link */ +@link-text-hover-color: @global-link-hover-color; + +/** Heading Link */ +@link-heading-hover-color: @global-link-hover-color; +@link-heading-hover-text-decoration: underline; + +.hook-link-heading() { + color: @global-primary-background; +} diff --git a/less/list.less b/less/list.less new file mode 100644 index 0000000..da2dcac --- /dev/null +++ b/less/list.less @@ -0,0 +1,39 @@ +@list-xlarge-margin-top: @global-medium-margin; +@list-xlarge-divider-margin-top: @global-medium-margin; +@list-xlarge-striped-padding-vertical: @global-medium-margin; +@list-xlarge-striped-padding-horizontal: @global-margin; +@list-padding-left: 25px; +@list-marker-height: @global-line-height; + +.hook-list-misc() { + .uk-list-bullet > * { + padding-left: @list-padding-left*2; + position: relative; + } + + .uk-list-bullet > ::before { + background: none; + content: '\ef4a'; + font-family: "Material Icons"; + position: absolute; + left: 0; + text-align: left; + } + + + .uk-list-xlarge > :nth-child(n+2), + .uk-list-xlarge > * > ul { margin-top: @list-xlarge-margin-top; } + + .uk-list-xlarge.uk-list-divider > :nth-child(n+2) { + margin-top: @list-xlarge-divider-margin-top; + padding-top: @list-xlarge-divider-margin-top; + } + + .uk-list-large.uk-list-striped > * { + padding: @list-xlarge-striped-padding-vertical @list-xlarge-striped-padding-horizontal; + } + + .uk-list-large.uk-list-striped > :nth-child(n+2) { + margin-top: 0; + } +} diff --git a/less/margin.less b/less/margin.less new file mode 100644 index 0000000..1f729c3 --- /dev/null +++ b/less/margin.less @@ -0,0 +1,9 @@ +@margin-xsmall-margin: @global-xsmall-margin; + +.uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; } +* + .uk-margin-xsmall { margin-top: @margin-xsmall-margin !important; } + +.uk-margin-xsmall-top { margin-top: @margin-xsmall-margin !important; } +.uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin !important; } +.uk-margin-xsmall-left { margin-left: @margin-xsmall-margin !important; } +.uk-margin-xsmall-right { margin-right: @margin-xsmall-margin !important; } diff --git a/less/marker.less b/less/marker.less new file mode 100644 index 0000000..e69de29 diff --git a/less/mixin.less b/less/mixin.less new file mode 100644 index 0000000..e69de29 diff --git a/less/modal.less b/less/modal.less new file mode 100644 index 0000000..bcb8116 --- /dev/null +++ b/less/modal.less @@ -0,0 +1,53 @@ +@modal-dialog-border-radius: @global-border-radius; + +@modal-body-padding-horizontal: @global-medium-gutter; +@modal-body-padding-vertical: @global-medium-gutter; + +@modal-header-padding-horizontal: @global-medium-gutter; +@modal-header-padding-vertical: @global-gutter; +@modal-header-background: @global-background; +@modal-header-border-width: @global-border-width; +@modal-header-border: @global-border; + +@modal-footer-padding-horizontal: @global-medium-gutter; +@modal-footer-padding-vertical: @global-medium-gutter; +@modal-footer-background: @global-background; +@modal-footer-border-width: @global-border-width; +@modal-footer-border: @global-border; + +@modal-close-position: @global-medium-gutter; + +.hook-modal-dialog() { + border-radius: @modal-dialog-border-radius; +} + +.hook-modal-header() { + border-bottom: @modal-header-border-width solid @modal-header-border; + border-radius: @modal-dialog-border-radius @modal-dialog-border-radius 0 0; +} + +.hook-modal-footer() { + border-top: @modal-footer-border-width solid @modal-footer-border; + border-radius: 0 0 @modal-dialog-border-radius @modal-dialog-border-radius; +} + +.hook-modal-misc() { + .uk-modal { + + .uk-button { + box-shadow: none !important; + } + + .uk-button-default { + border-color: @button-default-color; + + &:hover { + border-color: @button-default-hover-color; + } + + &:active { + border-color: @button-default-active-color; + } + } + } +} diff --git a/less/nav.less b/less/nav.less new file mode 100644 index 0000000..20362df --- /dev/null +++ b/less/nav.less @@ -0,0 +1,8 @@ +@nav-parent-icon-width: @global-line-height; +@nav-default-item-color: @global-meta-color; +@nav-default-item-hover-color: @global-link-hover-color; +@nav-default-item-active-font-weight: 600; + +.hook-nav-default-item-active() { + font-weight: @nav-default-item-active-font-weight; +} diff --git a/less/navbar.less b/less/navbar.less new file mode 100644 index 0000000..54d5f0c --- /dev/null +++ b/less/navbar.less @@ -0,0 +1,108 @@ +@navbar-background: @global-inverse-color; +@navbar-background-image: none; +@navbar-box-shadow: @global-default-shadow; + +@navbar-nav-item-font-size: @global-small-font-size; +@navbar-nav-item-font-weight: 600; +@navbar-nav-item-height: 65px; +@navbar-nav-item-color: @global-color; +@navbar-nav-item-hover-color: @global-secondary-background; +@navbar-nav-item-hover-text-decoration: none; +@navbar-nav-item-active-color: @global-primary-background; +@navbar-nav-item-active-text-decoration: none; +@navbar-nav-item-onclick-color: @navbar-nav-item-active-color; +@navbar-nav-item-onclick-text-decoration: @navbar-nav-item-active-text-decoration; + +@navbar-item-color: @navbar-nav-item-color; + +@navbar-toggle-color: @navbar-nav-item-color; +@navbar-toggle-hover-color: @global-link-hover-color; + +@navbar-dropdown-width: 260px; +@navbar-dropdown-margin: 5px; +@navbar-dropdown-padding: 0; +@navbar-dropdown-background: @global-inverse-color; +@navbar-dropdown-border: @global-border; +@navbar-dropdown-border-width: @global-border-width; +@navbar-dropdown-border-radius: @global-border-radius; +@navbar-dropdown-box-shadow: @global-default-shadow; + +@navbar-dropdown-nav-margin-vertical: 5px; +@navbar-dropdown-nav-margin-horizontal: 0; +@navbar-dropdown-nav-font-size: @global-small-font-size; +@navbar-dropdown-nav-font-weight: 400; + +@navbar-dropdown-nav-item-color: @global-color; +@navbar-dropdown-nav-item-padding-horizontal: 30px; +@navbar-dropdown-nav-item-padding-vertical: 5px; +@navbar-dropdown-nav-item-hover-background: @light-blue; +@navbar-dropdown-nav-item-hover-color: @global-color; +@navbar-dropdown-nav-item-active-background: @light-blue; +@navbar-dropdown-nav-item-active-font-weight: 600; +@navbar-dropdown-nav-item-active-color: @global-color; + +@navbar-dropdown-nav-header-color: @global-emphasis-color; + +@navbar-dropdown-nav-sublist-item-color: @global-meta-color; +@navbar-dropdown-nav-sublist-item-hover-color: @global-link-hover-color; +@navbar-dropdown-nav-sublist-item-active-color: @global-link-hover-color; + +/* Navbar */ + +.hook-navbar-container() { + background-image: @navbar-background-image; + background-size: cover; + box-shadow: @navbar-box-shadow; + + & .uk-logo { + & > img { + height: @navbar-nav-item-height - 20px; + } + } +} + + +/* Navbar items */ +.hook-navbar-nav-item() { + font-weight: @navbar-nav-item-font-weight; +} + +.hook-navbar-nav-item-hover() { + text-decoration: @navbar-nav-item-hover-text-decoration; +} + +.hook-navbar-nav-item-onclick() { + text-decoration: @navbar-nav-item-onclick-text-decoration; +} + +.hook-navbar-nav-item-active() { + text-decoration: @navbar-nav-item-active-text-decoration; +} + + +/* Navbar dropdown */ +.hook-navbar-dropdown() { + box-shadow: @navbar-dropdown-box-shadow; + border: @navbar-dropdown-border-width solid @navbar-dropdown-border; + border-radius: @navbar-dropdown-border-radius; +} + +.hook-navbar-dropdown-nav() { + font-size: @navbar-dropdown-nav-font-size; + font-weight: @navbar-dropdown-nav-font-weight; + margin: @navbar-dropdown-nav-margin-vertical @navbar-dropdown-nav-margin-horizontal; +} + +.hook-navbar-dropdown-nav-item() { + padding: @navbar-dropdown-nav-item-padding-vertical @navbar-dropdown-nav-item-padding-horizontal; +} + +.hook-navbar-dropdown-nav-item-hover() { + background-color: @navbar-dropdown-nav-item-hover-background; +} + +.hook-navbar-dropdown-nav-item-active() { + background-color: @navbar-dropdown-nav-item-active-background; + font-weight: @navbar-dropdown-nav-item-active-font-weight; +} + diff --git a/less/notification.less b/less/notification.less new file mode 100644 index 0000000..199c950 --- /dev/null +++ b/less/notification.less @@ -0,0 +1,52 @@ +@notification-message-font-size: @global-font-size; +@notification-message-line-height: @global-line-height; +@notification-message-border-width: @global-border-width; +@notification-message-border-radius: @global-border-radius; +@notification-message-box-shadow: @global-default-shadow; + +@notification-message-background: @global-background; +@notification-message-color: @global-color; +@notification-message-border: @global-border; + +/* Primary */ +@notification-message-primary-color: @info-color; +@notification-message-primary-background: @info-background-color; +@notification-message-primary-border: @info-border-color; + +/* Success */ +@notification-message-success-background: @success-background-color; +@notification-message-success-border: @success-border-color; + +/* Warning */ +@notification-message-warning-background: @warning-background-color; +@notification-message-warning-border: @warning-border-color; + +/* Danger */ +@notification-message-danger-background: @danger-background-color; +@notification-message-danger-border: @danger-border-color; + +.hook-notification-message() { + border: @notification-message-border-width solid @notification-message-border; + border-radius: @notification-message-border-radius; + box-shadow: @notification-message-box-shadow; +} + +.hook-notification-message-primary() { + background: @notification-message-primary-background; + border-color: @notification-message-primary-border; +} + +.hook-notification-message-success() { + background: @notification-message-success-background; + border-color: @notification-message-success-border; +} + +.hook-notification-message-warning() { + background: @notification-message-warning-background; + border-color: @notification-message-warning-border; +} + +.hook-notification-message-danger() { + background: @notification-message-danger-background; + border-color: @notification-message-danger-border; +} diff --git a/less/offcanvas.less b/less/offcanvas.less new file mode 100644 index 0000000..e69de29 diff --git a/less/overlay.less b/less/overlay.less new file mode 100644 index 0000000..e69de29 diff --git a/less/padding.less b/less/padding.less new file mode 100644 index 0000000..e69de29 diff --git a/less/pagination.less b/less/pagination.less new file mode 100644 index 0000000..abf7028 --- /dev/null +++ b/less/pagination.less @@ -0,0 +1,39 @@ +@pagination-margin-horizontal: 15px; +@pagination-item-border-radius: 326px; +@pagination-item-color: @global-color; +@pagination-item-font-size: @global-small-font-size; +@pagination-item-line-height: 25px; +@pagination-item-min-width: 35px; +@pagination-item-next-previous-color: @global-primary-background; +@pagination-item-padding-horizontal: 5px; +@pagination-item-padding-vertical: 5px; + +/** Hover */ +@pagination-item-hover-color: @global-primary-background; + +/** Active */ +@pagination-item-active-background: @global-primary-background; +@pagination-item-active-color: @global-inverse-color; + +.hook-pagination-item() { + min-width: @pagination-item-min-width; + line-height: @pagination-item-line-height; + box-sizing: border-box; + text-align: center; + transition: .1s ease-in-out; + transition-property: color,background-color,border-color,box-shadow; + background-color: transparent; + font-size: @pagination-item-font-size; + border-radius: @pagination-item-border-radius; +} + +.hook-pagination-item-active() { + background-color: @pagination-item-active-background; +} + +.hook-pagination-misc() { + + .uk-pagination-next, .uk-pagination-previous { + color: @pagination-item-next-previous-color; + } +} diff --git a/less/placeholder.less b/less/placeholder.less new file mode 100644 index 0000000..e69de29 diff --git a/less/position.less b/less/position.less new file mode 100644 index 0000000..e69de29 diff --git a/less/print.less b/less/print.less new file mode 100644 index 0000000..e69de29 diff --git a/less/progress.less b/less/progress.less new file mode 100644 index 0000000..ae4bd00 --- /dev/null +++ b/less/progress.less @@ -0,0 +1,15 @@ +@progress-height: 16px; +@progress-background: transparent; +@progress-border-radius: 500px; +@progress-box-shadow: @global-inset-shadow; +@progress-bar-background: @global-secondary-background; + + +.hook-progress() { + border-radius: @progress-border-radius; + box-shadow: @progress-box-shadow; +} + +.hook-progress-bar() { + border-radius: @progress-border-radius; +} diff --git a/less/search.less b/less/search.less new file mode 100644 index 0000000..8f0afb3 --- /dev/null +++ b/less/search.less @@ -0,0 +1,83 @@ +.hook-search-misc() { + .search-input { + --search-input-shadow: none; + --search-input-background: none; + --search-input-border-width: 0; + --search-input-border: transparent; + --search-input-border-radius: 500px; + --search-input-icon-color: @global-secondary-background; + --search-input-icon-color-collapsed: @global-color; + --search-input-icon-color-disabled: @global-muted-color; + --search-input-divider: @global-border-width solid @global-border; + --search-input-icon-padding: 20px; + border-radius: var(--search-input-border-radius); + border: var(--search-input-border-width) solid var(--search-input-border); + box-shadow: var(--search-input-shadow); + background: var(--search-input-background); + width: 100%; + transition: width 0.5s ease-out; + + &.collapsed { + width: calc(2 * var(--search-input-icon-padding) + 26px); + + & .search-icon { + color: var(--search-input-icon-color-collapsed); + } + } + + & .inputs { + & > :not(:last-child) { + position: relative; + + &::after { + content: ''; + position: absolute; + right: 0; + top: 15px; + bottom: 15px; + width: 0; + border-left: var(--search-input-divider); + } + } + } + + & .search-icon { + padding: var(--search-input-icon-padding); + color: var(--search-input-icon-color); + cursor: pointer; + user-select: none; + + &.disabled { + color: var(--search-input-icon-color-disabled); + cursor: default; + pointer-events: none; + } + } + + /* Modifiers */ + + &.inner { + --search-input-background: @global-inverse-color; + --search-input-shadow: @global-inset-shadow; + } + + &.flat { + --search-input-background: @global-inverse-color; + --search-input-border-width: @global-border-width; + --search-input-border: @global-border; + } + + &.outer { + --search-input-background: @global-background; + --search-input-shadow: @global-medium-box-shadow; + } + } +} + +.hook-inverse-misc() { + .search-input { + &.outer { + --search-input-shadow: @inverse-global-medium-box-shadow; + } + } +} diff --git a/less/section.less b/less/section.less new file mode 100644 index 0000000..0b7eb25 --- /dev/null +++ b/less/section.less @@ -0,0 +1,5 @@ +/** Primary */ +@section-primary-background: @global-primary-gradient; + +/** Secondary*/ +@section-secondary-background: @global-color; diff --git a/less/slidenav.less b/less/slidenav.less new file mode 100644 index 0000000..b2547e2 --- /dev/null +++ b/less/slidenav.less @@ -0,0 +1,3 @@ +@slidenav-color: @global-color; +@slidenav-hover-color: @global-secondary-background; +@slidenav-active-color: @global-secondary-background; diff --git a/less/slider.less b/less/slider.less new file mode 100644 index 0000000..e69de29 diff --git a/less/slideshow.less b/less/slideshow.less new file mode 100644 index 0000000..e69de29 diff --git a/less/sortable.less b/less/sortable.less new file mode 100644 index 0000000..e69de29 diff --git a/less/spinner.less b/less/spinner.less new file mode 100644 index 0000000..e69de29 diff --git a/less/stepper.less b/less/stepper.less new file mode 100644 index 0000000..f08fb1d --- /dev/null +++ b/less/stepper.less @@ -0,0 +1,142 @@ +@stepper-line-size: 16px; +@stepper-line-box-shadow: @global-inset-shadow; +@stepper-line-border-radius: @global-border-radius; + +@stepper-default-text-color: @global-primary-background; +@stepper-default-button-background: @global-inverse-color; +@stepper-default-button-color: @global-primary-background; + +@stepper-default-button-hover-background: @global-primary-background; +@stepper-default-button-hover-color: @global-inverse-color; + +@stepper-active-text-color: @global-secondary-background; +@stepper-active-button-background: @global-secondary-background; +@stepper-active-button-color: @global-inverse-color; + +@stepper-done-text-color: @global-primary-background; +@stepper-done-button-background: @global-primary-background; +@stepper-done-button-color: @global-inverse-color; + +@stepper-disabled-button-background: @global-muted-background; +@stepper-disabled-button-color: @global-muted-color; + +.stepper { + & .stepper-line-container{ + position: absolute; bottom: -4px; left: -90px; right: 0; width: 200px; + } + + & .stepper-line { + margin: 0 -@stepper-line-size; + min-width: 2*@stepper-line-size; + height: @stepper-line-size; + box-shadow: @stepper-line-box-shadow; + border-radius: @stepper-line-border-radius; + width: 100%; + + &.active { + background-color: @stepper-active-button-background; + } + + &.done { + background-color: @stepper-done-button-background; + } + + &.disabled { + background-color: @stepper-disabled-button-background; + } + } + + & .stepper-text { + &.default { + color: @stepper-default-text-color; + } + + &.active { + color: @stepper-active-text-color; + } + + &.done { + color: @stepper-done-text-color; + } + } + + & button { + &.default { + background-color: @stepper-default-button-background; + color: @stepper-default-button-color; + + &:hover { + background-color: @stepper-default-button-hover-background; + color: @stepper-default-button-hover-color; + } + } + + &.active { + background-color: @stepper-active-button-background; + color: @stepper-active-button-color; + } + + &.done { + background-color: @stepper-done-button-background; + color: @stepper-done-button-color; + } + + &.disabled { + background-color: @stepper-disabled-button-background; + color: @stepper-disabled-button-color; + } + } +} + +.stepper button.active{ + background-color:var(--step-active-background); + color:var(--step-active-color); +} +.stepper button.disabled { + background-color: var(--step-disabled-background); + color: var(--step-disabled-text); +} +.stepper .stepper-text.active{ + color:var(--step-active-text); +} +.stepper button.done{ + background-color:var(--step-done-background); + color:var(--step-done-color); +} +.stepper .stepper-text.done{ + color:var(--step-done-text); +} +.stepper button.default{ + background-color:var(--step-default-background); + color:var(--step-default-color); +} +.stepper button.default:hover{ + background-color:var(--step-default-background-hover); + color:var(--step-default-color-hover); +} +.stepper .stepper-text.default{ + color:var(--step-default-text); +} +.stepper .stepper-line { + box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1); + border-radius: 6px; + opacity: 1; + width: 100%; +} +.stepper .stepper-line { + box-shadow:inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1); +} +.stepper .stepper-line.active, .stepper .stepper-line.done { + background-color: var(--step-done-background); +} +/*.stepper .stepper-line.default {*/ +/* background-color: var(--step-default-background);*/ +/*}*/ +.stepper .stepper-line.disabled { + background-color: var(--muted-color); + +} +.stepper .stepper-line-container{ + position: absolute; bottom: -4px; left: -90px; right: 0; width: 200px; +} + diff --git a/less/sticky.less b/less/sticky.less new file mode 100644 index 0000000..e69de29 diff --git a/less/subnav.less b/less/subnav.less new file mode 100644 index 0000000..646df1e --- /dev/null +++ b/less/subnav.less @@ -0,0 +1,106 @@ +@subnav-item-font-size: @global-small-font-size; +@subnav-item-line-height: 17px; +@subnav-item-font-weight: 400; + +/* Pills */ +@subnav-pill-item-padding-vertical: 10px; +@subnav-pill-item-padding-horizontal: 20px; +@subnav-pill-item-border-radius: 60px; +@subnav-pill-item-background: transparent; +@subnav-pill-item-color: @global-primary-background; +@subnav-pill-item-border: @global-muted-background; +@subnav-pill-item-border-width: @global-border-width; +@subnav-pill-item-hover-background: transparent; +@subnav-pill-item-hover-color: @primary-light-color; +@subnav-pill-item-hover-border: @primary-light-color; +@subnav-pill-item-active-background: @global-primary-background; +@subnav-pill-item-active-background-gradient: @global-primary-gradient; +@subnav-pill-item-active-border: transparent; +@subnav-pill-item-active-color: @global-inverse-color; + +/* Pills aly*/ +@subnav-pill-alt-padding: 4px; +@subnav-pill-alt-border-radius: 60px; +@subnav-pill-alt-background: @global-inverse-color; +@subnav-pill-alt-box-shadow: @global-large-box-shadow; +@subnav-pill-alt-item-padding-vertical: 10px; +@subnav-pill-alt-item-padding-horizontal: 20px; +@subnav-pill-alt-item-color: @global-meta-color; +@subnav-pill-alt-item-hover-color: @global-secondary-background; +@subnav-pill-alt-item-active-background: none; +@subnav-pill-alt-item-active-background-gradient: @global-primary-gradient; +@subnav-pill-alt-item-active-color: @global-inverse-color; + + +.hook-subnav-item() { + font-size: @subnav-item-font-size; + font-weight: @subnav-item-font-weight; + line-height: @subnav-item-line-height; +} + +.hook-subnav-pill-item() { + border: @subnav-pill-item-border-width solid @subnav-pill-item-border; + border-radius: @subnav-pill-item-border-radius; + background-origin: border-box; +} + +.hook-subnav-pill-item-hover() { + border-color: @subnav-pill-item-hover-border; +} + +.hook-subnav-pill-item-active() { + border-color: @subnav-pill-item-active-border; + background-image: @subnav-pill-item-active-background-gradient; +} + +.hook-subnav-misc() { + .uk-subnav.uk-subnav-pill-alt { + background: @subnav-pill-alt-background; + border-radius: @subnav-pill-alt-border-radius; + box-shadow: @subnav-pill-alt-box-shadow; + padding: @subnav-pill-alt-padding; + + & > :first-child { + padding-left: 0; + } + + & > * > :first-child { + padding: @subnav-pill-alt-item-padding-vertical @subnav-pill-alt-item-padding-horizontal; + color: @subnav-pill-alt-item-color; + border-radius: @subnav-pill-alt-border-radius; + } + + & > :hover > a { + color: @subnav-pill-alt-item-hover-color; + position: relative; + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: @subnav-pill-alt-item-active-background; + background-image: @subnav-pill-alt-item-active-background-gradient; + opacity: 0.1; + border-radius: inherit; + } + } + + & > .uk-active > a { + background-color: @subnav-pill-alt-item-active-background; + color: @subnav-pill-alt-item-active-color; + background-image: @subnav-pill-alt-item-active-background-gradient; + } + } +} + +/* Inverse */ +@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow; + +.hook-inverse-misc() { + .uk-subnav.uk-subnav-pill-alt { + box-shadow: @inverse-subnav-pill-alt-box-shadow; + } +} diff --git a/less/svg.less b/less/svg.less new file mode 100644 index 0000000..e69de29 diff --git a/less/switcher.less b/less/switcher.less new file mode 100644 index 0000000..e69de29 diff --git a/less/tab.less b/less/tab.less new file mode 100644 index 0000000..1766fbb --- /dev/null +++ b/less/tab.less @@ -0,0 +1,30 @@ +@tab-border-width: @global-border-width; +@tab-border: @global-border; +@tab-box-shadow: none; +@tab-item-color: @global-meta-color; +@tab-item-border-width: @global-border-width + 2; +@tab-item-font-weight: 400; +@tab-item-padding-horizontal: 10px; +@tab-item-padding-vertical: 10px; + +/** Hover */ +@tab-item-hover-color: @global-secondary-background; + +/** Active */ +@tab-item-active-border: @global-secondary-background; +@tab-item-active-color: @global-primary-background; + +.hook-tab() { + border-bottom: @tab-border-width solid @tab-border; +} + +.hook-tab-item-active() { + border-bottom: @tab-item-border-width solid @tab-item-active-border; + font-weight: 600; +} + +.hook-tab-misc() { + .uk-tab > *:first-child { + padding-left: 0; + } +} diff --git a/less/table.less b/less/table.less new file mode 100644 index 0000000..e69de29 diff --git a/less/text.less b/less/text.less new file mode 100644 index 0000000..9696238 --- /dev/null +++ b/less/text.less @@ -0,0 +1,15 @@ +/* Meta */ +@text-meta-font-size: inherit; +@text-meta-line-height: inherit; +@text-meta-color: @global-meta-color; + +/* Background */ +@text-background-gradient: @global-primary-gradient; +@text-background-color: @global-primary-background; + +.hook-text-background() { + background-image: @text-background-gradient; +} + + + diff --git a/less/thumbnav.less b/less/thumbnav.less new file mode 100644 index 0000000..e69de29 diff --git a/less/tile.less b/less/tile.less new file mode 100644 index 0000000..2addf8c --- /dev/null +++ b/less/tile.less @@ -0,0 +1 @@ +@tile-default-background: @global-inverse-color; diff --git a/less/tooltip.less b/less/tooltip.less new file mode 100644 index 0000000..df18e14 --- /dev/null +++ b/less/tooltip.less @@ -0,0 +1,13 @@ +@tooltip-background: @global-background; +@tooltip-border-radius: @global-small-border-radius; +@tooltip-color: @global-color; +@tooltip-padding-horizontal: 20px; +@tooltip-padding-vertical: 5px; +@tooltip-border-width: @global-border-width; +@tooltip-border: @global-border; +@tooltip-shadow: @global-default-shadow; + +.hook-tooltip() { + border: @tooltip-border-width solid @tooltip-border; + box-shadow: @tooltip-shadow; +} diff --git a/less/totop.less b/less/totop.less new file mode 100644 index 0000000..1ad84b6 --- /dev/null +++ b/less/totop.less @@ -0,0 +1,45 @@ +@totop-padding: 16px; +@totop-border-radius: 500px; + +@totop-color: @global-emphasis-color; +@totop-box-shadow: @global-large-box-shadow; + +/* Hover */ +@totop-hover-color: @global-primary-background; +@totop-hover-box-shadow: @global-medium-box-shadow; + +/** Active */ +@totop-active-color: @global-primary-background; +@totop-active-box-shadow: @global-small-box-shadow; + +.hook-totop() { + box-shadow: @totop-box-shadow; + border-radius: @totop-border-radius; +} + +.hook-totop-hover() { + box-shadow: @totop-hover-box-shadow; +} + +.hook-totop-active() { + box-shadow: @totop-active-box-shadow; +} + +/** Inverse */ +@inverse-totop-box-shadow: @inverse-global-large-box-shadow; +@inverse-totop-hover-box-shadow: @inverse-global-medium-box-shadow; +@inverse-totop-active-box-shadow: @inverse-global-small-box-shadow; + +.hook-inverse-misc() { + .uk-totop { + box-shadow: @inverse-totop-box-shadow; + } + + .uk-totop:hover { + box-shadow: @inverse-totop-hover-box-shadow; + } + + .uk-totop:active { + box-shadow: @inverse-totop-active-box-shadow; + } +} diff --git a/less/transition.less b/less/transition.less new file mode 100644 index 0000000..e69de29 diff --git a/less/utility.less b/less/utility.less new file mode 100644 index 0000000..39ae5b8 --- /dev/null +++ b/less/utility.less @@ -0,0 +1,28 @@ +@dropcap-font-size: @global-line-height * 3; +@border-rounded-border-radius: @global-border-radius; + +/* Box-shadow */ +.uk-box-shadow-default { + box-shadow: @global-default-shadow; +} + +.uk-box-shadow-inner { + box-shadow: @global-inset-shadow; +} + +.uk-box-no-shadow { + box-shadow: none; +} + +/* Inverse */ +.hook-inverse-misc() { + .uk-box-shadow-small { box-shadow: @inverse-global-small-box-shadow; } + .uk-box-shadow-medium { box-shadow: @inverse-global-medium-box-shadow; } + .uk-box-shadow-large { box-shadow: @inverse-global-large-box-shadow; } + .uk-box-shadow-xlarge { box-shadow: @inverse-global-xlarge-box-shadow; } + + .uk-box-shadow-hover-small:hover { box-shadow: @inverse-global-small-box-shadow; } + .uk-box-shadow-hover-medium:hover { box-shadow: @inverse-global-medium-box-shadow; } + .uk-box-shadow-hover-large:hover { box-shadow: @inverse-global-large-box-shadow; } + .uk-box-shadow-hover-xlarge:hover { box-shadow: @inverse-global-xlarge-box-shadow; } +} diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..87ff959 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,63 @@ +/** Typography */ +@global-font-family: Aileron; +@global-font-size: 16px; +@global-line-height: 24px; +@global-xsmall-font-size: 12px; +@global-small-font-size: 14px; +@global-medium-font-size: 20px; +@global-large-font-size: 20px; +@global-xlarge-font-size: 34px; + +/** Colors */ +@global-color: @grey-color; +@global-emphasis-color: @dark-color; +@global-inverse-color: @light-color; +@global-link-color: @info-color; +@global-muted-color: @disable-color; +@global-meta-color: @placeholder-color; +@global-link-hover-color: @secondary-color; + +/** Backgrounds */ +@global-background: @default-color; +@global-danger-background: @danger-color; +@global-muted-background: @muted-color; +@global-primary-background: @primary-color; +@global-secondary-background: @secondary-color; +@global-success-background: @success-color; +@global-warning-background: @warning-color; +@global-primary-gradient: linear-gradient(51deg, @primary-light-color 0%, @primary-dark-color 100%); +@global-opacity: 30%; + +/** Borders */ +@global-border: @muted-color; +@global-border-radius: 6px; +@global-small-border-radius: 4px; + +/* Shadows*/ +@global-default-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); +@global-inset-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1); +@global-small-box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.07); +@global-medium-box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07); +@global-large-box-shadow: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07); +@global-xlarge-box-shadow: -20px -20px 25px rgba(255, 255, 255, 0.6), 20px 20px 25px rgba(0, 0, 0, 0.07); + +/* Spacings */ +@global-small-gutter: 20px; +@global-xsmall-margin: 5px; + +/* Controls */ +@global-control-small-height: 40px; +@global-control-height: 48px; +@global-control-large-height: 56px; + +/* Breakpoints */ +@breakpoint-small: 481px; +@breakpoint-medium: 769px; +@breakpoint-large: 1025px; +@breakpoint-xlarge: 1201px; + +/* Inverse */ +@inverse-global-small-box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.3); +@inverse-global-medium-box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.3); +@inverse-global-large-box-shadow: -15px -15px 20px rgba(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3); +@inverse-global-xlarge-box-shadow: -20px -20px 25px rgba(255, 255, 255, 0.05), 20px 20px 25px rgba(0, 0, 0, 0.3); diff --git a/less/visibility.less b/less/visibility.less new file mode 100644 index 0000000..e69de29 diff --git a/less/width.less b/less/width.less new file mode 100644 index 0000000..50ed2ee --- /dev/null +++ b/less/width.less @@ -0,0 +1,31 @@ +@width-xsmall-width: 100px; + +.hook-width-misc() { + .uk-width-xsmall { + width: @width-xsmall-width; + } + + @media (min-width: @breakpoint-small) { + .uk-width-xsmall\@s { + width: @width-xsmall-width; + } + } + + @media (min-width: @breakpoint-medium) { + .uk-width-xsmall\@m { + width: @width-xsmall-width; + } + } + + @media (min-width: @breakpoint-large) { + .uk-width-xsmall\@l { + width: @width-xsmall-width; + } + } + + @media (min-width: @breakpoint-xlarge) { + .uk-width-xsmall\@xl { + width: @width-xsmall-width; + } + } +}