From 809a51350d0bc63ff870e7312ce9454ae0fd3393 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 22 Aug 2023 17:09:22 +0300 Subject: [PATCH 01/10] Update to Uikit 3.16.24 --- less/nav.less | 25 +++++++++++++------------ less/offcanvas.less | 2 +- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/less/nav.less b/less/nav.less index f3d9ae0..c2a342d 100644 --- a/less/nav.less +++ b/less/nav.less @@ -13,6 +13,7 @@ @nav-primary-item-hover-color: @global-secondary-background; @nav-primary-item-active-color: @global-secondary-background; @nav-primary-header-color: @global-secondary-background; +@nav-primary-sublist-font-size: @global-font-size; @nav-primary-sublist-item-color: @nav-primary-item-color; @nav-primary-sublist-item-hover-color: @nav-primary-item-hover-color; @nav-primary-sublist-item-active-font-weight: 600; @@ -54,16 +55,6 @@ } } -.hook-nav-parent-icon() { - background-image: none !important; - font-family: "Material Icons"; - font-weight: 400 !important; - font-size: 1.5em; - width: auto; - height: auto; - content: "\e5c5"; -} - .hook-nav-misc() { .uk-nav-sub ul { &:before { @@ -79,8 +70,18 @@ font-weight: @nav-primary-sublist-item-active-font-weight; } - .uk-nav-parent-icon > .uk-parent.uk-open > a::after { - content: "\e5c7"; + .uk-nav-parent-icon { + display: flex; + flex-direction: column; + align-items: center; + + &::after { + background-image: none !important; + font-family: "Material Icons"; + font-weight: 400 !important; + font-size: 1.5em; + content: "\e5c5"; + } } .uk-nav-sub .uk-nav-divider { diff --git a/less/offcanvas.less b/less/offcanvas.less index b8eef85..258fe88 100644 --- a/less/offcanvas.less +++ b/less/offcanvas.less @@ -16,7 +16,7 @@ @offcanvas-bar-width: 100vw; @offcanvas-bar-padding-vertical: @global-medium-gutter; @offcanvas-bar-padding-horizontal: @global-medium-gutter; -@offcanvas-bar-width-m: 550px; +@offcanvas-bar-width-s: 550px; @offcanvas-bar-border-radius: @global-small-border-radius; @offcanvas-bar-background: @global-background; @offcanvas-bar-box-shadow: @global-large-box-shadow; From 341712701ff2d0079fe188d212596251f3a86767 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 23 Aug 2023 11:42:26 +0300 Subject: [PATCH 02/10] Add xsmall padding --- less/_import.less | 1 + less/padding.less | 3 +++ less/variables.less | 1 + 3 files changed, 5 insertions(+) create mode 100644 less/padding.less diff --git a/less/_import.less b/less/_import.less index 543a2e9..399e271 100644 --- a/less/_import.less +++ b/less/_import.less @@ -58,6 +58,7 @@ @import "background"; @import "utility"; @import "margin"; +@import "padding"; @import "inverse"; // Extend diff --git a/less/padding.less b/less/padding.less new file mode 100644 index 0000000..9e7068b --- /dev/null +++ b/less/padding.less @@ -0,0 +1,3 @@ +@padding-xsmall-padding: @global-xsmall-gutter; + +.uk-padding-xsmall { padding: @padding-xsmall-padding; } diff --git a/less/variables.less b/less/variables.less index 81781ef..d81b009 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,6 +46,7 @@ /* Spacings */ @global-small-gutter: 20px; +@global-xsmall-gutter: 10px; @global-xsmall-margin: 5px; /* Controls */ From d52e92929799a1626aff66ad413c6db2be521555 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 23 Aug 2023 15:21:17 +0300 Subject: [PATCH 03/10] Add drop.less and override drop-z-index variable --- less/_import.less | 1 + less/drop.less | 1 + less/dropdown.less | 1 - 3 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 less/drop.less diff --git a/less/_import.less b/less/_import.less index 399e271..9c177db 100644 --- a/less/_import.less +++ b/less/_import.less @@ -33,6 +33,7 @@ // JavaScript @import "accordion"; +@import "drop"; @import "dropdown"; @import "modal"; @import "slider"; diff --git a/less/drop.less b/less/drop.less new file mode 100644 index 0000000..6cc7b1e --- /dev/null +++ b/less/drop.less @@ -0,0 +1 @@ +@drop-z-index: @global-z-index - 19; diff --git a/less/dropdown.less b/less/dropdown.less index f5ef072..2b42884 100644 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -1,4 +1,3 @@ -@dropdown-z-index: @global-z-index - 19; @dropdown-min-width: 260px; @dropdown-padding: 5px 0; @dropdown-background: @global-background; From 98077993a6eba7998b18fbfdee223409f0829ae6 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 24 Aug 2023 14:07:29 +0300 Subject: [PATCH 04/10] Update modal header and footer vertical padding. --- less/modal.less | 38 ++++++++++++-------------------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/less/modal.less b/less/modal.less index 35fb9a0..6872d13 100644 --- a/less/modal.less +++ b/less/modal.less @@ -2,21 +2,21 @@ @modal-dialog-border-radius: @global-border-radius; -@modal-body-padding-horizontal: @global-medium-gutter; -@modal-body-padding-vertical: @global-medium-gutter; -@modal-body-padding-horizontal-mobile: @global-small-gutter; -@modal-body-padding-vertical-mobile: @global-small-gutter; +@modal-body-padding-horizontal-s: @global-medium-gutter; +@modal-body-padding-vertical-s: @global-medium-gutter; +@modal-body-padding-horizontal: @global-small-gutter; +@modal-body-padding-vertical: @global-small-gutter; -@modal-header-padding-horizontal: @global-medium-gutter; -@modal-header-padding-vertical: @global-gutter; -@modal-header-padding-horizontal-mobile: @global-small-gutter; -@modal-header-padding-vertical-mobile: @global-small-gutter; +@modal-header-padding-horizontal-s: @global-medium-gutter; +@modal-header-padding-vertical-s: @global-small-gutter; +@modal-header-padding-horizontal: @global-small-gutter; +@modal-header-padding-vertical: @global-xsmall-gutter; @modal-header-background: @global-background; -@modal-footer-padding-horizontal: @global-medium-gutter; -@modal-footer-padding-vertical: @global-medium-gutter; -@modal-footer-padding-horizontal-mobile: @global-small-gutter; -@modal-footer-padding-vertical-mobile: @global-small-gutter; +@modal-footer-padding-horizontal-s: @global-medium-gutter; +@modal-footer-padding-vertical-s: @global-small-gutter; +@modal-footer-padding-horizontal: @global-small-gutter; +@modal-footer-padding-vertical: @global-xsmall-gutter; @modal-footer-background: @global-background; @modal-footer-border-width: @global-border-width; @modal-footer-border: @global-border; @@ -42,20 +42,6 @@ } .hook-modal-misc() { - @media (max-width: @breakpoint-small-max) { - .uk-modal-body { - padding: @modal-body-padding-vertical-mobile @modal-body-padding-horizontal-mobile; - } - - .uk-modal-header { - padding: @modal-header-padding-vertical-mobile @modal-header-padding-horizontal-mobile; - } - - .uk-modal-footer { - padding: @modal-footer-padding-vertical-mobile @modal-footer-padding-horizontal-mobile; - } - } - .uk-modal, uk-dropdown { .uk-button, uk-icon-button { From 3a4aa92c441467994a45a2c6a4f0c21202945404 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 12 Sep 2023 18:39:01 +0300 Subject: [PATCH 05/10] Change inputs style base on new mocks --- less/input.less | 50 +++++++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/less/input.less b/less/input.less index b4693c6..0a3f731 100644 --- a/less/input.less +++ b/less/input.less @@ -4,13 +4,14 @@ /* Basic Information */ --input-placeholder-color: @global-meta-color; --input-placeholder-weight: 400; + --input-placeholder-padding-horizontal: 5px; --input-hint-color: @global-meta-color; --input-color: @global-emphasis-color; --input-border-radius: @global-border-radius; /* Size modifiers */ --input-padding-vertical: 12px; --input-padding-horizontal: 25px; - --input-font-size: @global-font-size; + --input-font-size: @global-small-font-size; /* Styling */ --input-background: transparent; --input-shadow: none; @@ -26,7 +27,7 @@ --input-background-focus: var(--input-background); --input-shadow-focus: var(--input-shadow); --input-border-focus: var(--input-border); - --input-color-focus: @global-link-hover-color; + --input-placeholder-color-focus: @global-emphasis-color; --input-border-style-focus: var(--input-border-style); /* Disabled */ --input-color-disabled: @global-muted-color; @@ -60,37 +61,39 @@ 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; + padding: var(--input-padding-vertical) 0 var(--input-padding-vertical) var(--input-padding-horizontal); + cursor: pointer; color: var(--input-color); &.static { padding-top: var(--input-padding-vertical); } - &.select { - cursor: pointer; - } - & > .placeholder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; - overflow: hidden; pointer-events: none; color: var(--input-placeholder-color); font-weight: var(--input-placeholder-weight); & > label { position: absolute; + background: linear-gradient( + to top, + var(--input-background) 0%, + var(--input-background) 50%, + transparent 50%, + transparent 100% + ); + padding: 0 var(--input-placeholder-padding-horizontal); 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; + top: var(--input-padding-vertical); + left: calc(var(--input-padding-horizontal) - var(--input-placeholder-padding-horizontal)); + transition: all 0.3s ease 0s; } } @@ -210,13 +213,17 @@ border-color: var(--input-border-focus); border-style: var(--input-border-style-focus); + & > .input-box:not(.select) { + cursor: text; + } + & > .input-box { box-shadow: var(--input-shadow-focus); background: var(--input-background-focus); } - &:not(.hint):not(.disabled) > .input-box > .placeholder > label { - color: var(--input-color-focus); + &:not(.hint):not(.disabled):not(.danger) > .input-box > .placeholder > label { + color: var(--input-placeholder-color-focus); } } @@ -257,7 +264,8 @@ &.active > .input-box > .placeholder > label, &.focused > .input-box > .placeholder > label, &.hint > .input-box > .placeholder > label { - top: calc(var(--input-padding-vertical) + 13px); + transform: translateY(-50%); + top: calc(var(--input-border-width) * -1); font-size: 12px; line-height: 18px; } @@ -275,6 +283,7 @@ &.flat { --input-background: @global-inverse-color; --input-border: @gray-300; + --input-border-focus: @global-emphasis-color; } &.border-bottom { @@ -283,12 +292,11 @@ --input-border-style: hidden hidden solid hidden; --input-padding-horizontal: 0; --input-padding-vertical: 5px; + --input-placeholder-padding-horizontal: 0; --input-border-focus: @global-color; - --input-font-size: 14px; } &.search { - --input-font-size: 14px; --input-padding-horizontal: 30px; --input-padding-vertical: 15px; } @@ -299,7 +307,6 @@ --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; @@ -308,18 +315,17 @@ &.icon-left { --input-padding-horizontal: 0; + --input-placeholder-padding-horizontal: 0; } &.x-small { --input-padding-horizontal: 15px; - --input-padding-vertical: 5px; - --input-font-size: 14px; + --input-padding-vertical: 10px; } &.small { --input-padding-horizontal: 20px; --input-padding-vertical: 10px; - --input-font-size: 14px; } &.small-vertical { From 51ac1b254b39b3c2d9124f191091fc926f9535fe Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 5 Oct 2023 17:01:22 +0300 Subject: [PATCH 06/10] Add dark mode for progress and add slider-* classes in slider --- less/progress.less | 13 +++++ less/slider.less | 116 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+) diff --git a/less/progress.less b/less/progress.less index c8cc736..6d9d39d 100644 --- a/less/progress.less +++ b/less/progress.less @@ -8,6 +8,9 @@ @progress-circle-text-font-weight: @text-bold-weight; @progress-circle-text-font-size: @global-large-font-size; +@inverse-progress-background: @inverse-global-color; +@inverse-progress-bar-background: @global-secondary-background; + .hook-progress() { border-radius: @progress-border-radius; box-shadow: @progress-box-shadow; @@ -37,3 +40,13 @@ } } } + +.hook-inverse() { + .uk-progress { + background-color: @inverse-progress-background; + } + + .uk-progress::-webkit-progress-value, .uk-progress::-moz-progress-bar { + background-color: @inverse-progress-bar-background; + } +} diff --git a/less/slider.less b/less/slider.less index 07dda8a..5bc2dc3 100644 --- a/less/slider.less +++ b/less/slider.less @@ -2,6 +2,50 @@ @slider-arrow-width: 50px; @slider-arrow-margin: 5px; +@slider-container-progress-height: 6px; +@slider-nav-item-margin: @global-small-margin; +@slider-nav-item-padding: 20px 30px; +@slider-nav-item-border-radius: @global-border-radius; +@slider-nav-item-background-hover: @ciel-color; +@slider-nav-item-background-active: @ciel-color; +@slider-nav-item-action-size: @icon-button-small-size; +@slider-nav-item-action-background: @global-background; + +@inverse-slider-nav-item-background-hover: fade(@global-inverse-color, 15%); +@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 15%); + +.mobile(@link-color: @global-link-color, @link-color-hover: @global-link-hover-color) { + @media (max-width: @breakpoint-medium-max) { + slider-container { + + & slider-nav-item { + & > * { + padding: 0; + } + + & > *:hover { + background: none; + } + + & > .uk-active { + box-shadow: none; + background: none; + + & > .action { + & > a { + border: @global-border-width solid @link-color; + } + + & > a:hover { + border-color: @link-color-hover; + } + } + } + } + } + } +} + .hook-slider-misc() { .uk-slider-arrow { height: 100%; @@ -31,4 +75,76 @@ margin-left: -@subnav-margin-horizontal; } } + + slider-container { + & .uk-progress { + height: @slider-container-progress-height; + cursor: pointer; + } + + & slider-nav-item { + display: block; + + & > * { + padding: @slider-nav-item-padding; + border-radius: @slider-nav-item-border-radius; + cursor: pointer; + + & > .action { + width: @slider-nav-item-action-size; + position: relative; + + & > a, & > a:hover { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 500px; + width: @slider-nav-item-action-size; + height: @slider-nav-item-action-size; + background: @slider-nav-item-action-background; + } + } + } + + & > *:hover { + background: @slider-nav-item-background-hover; + } + + & > .uk-active { + background: @slider-nav-item-background-active; + + & > .action { + & > a, & > a:hover { + display: flex; + } + } + } + + &:not(:last-child) { + margin-bottom: @slider-nav-item-margin; + } + } + } + + .mobile(); +} + +.hook-inverse() { + slider-container { + + & slider-nav-item { + + & > *:hover { + background: @inverse-slider-nav-item-background-hover; + } + + & > .uk-active { + box-shadow: 10px 10px 25px #0000001A; + background: @inverse-slider-nav-item-background-active; + } + } + } + + .mobile(@inverse-base-link-color, @inverse-base-link-color); } From 540b3970611802a614ea61fd90686dbeafc43484 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 6 Oct 2023 10:13:21 +0300 Subject: [PATCH 07/10] Fix progress for webkit. Add dark-color for section-secondary. --- less/color.less | 3 ++- less/progress.less | 7 ++++++- less/section.less | 2 +- less/variables.less | 5 +++-- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/less/color.less b/less/color.less index 36056a8..9604eb4 100644 --- a/less/color.less +++ b/less/color.less @@ -3,7 +3,8 @@ @primary-dark-color: #1F2379; @secondary-color: #3086ED; -@dark-color: #000000; +@black-color: #000000; +@dark-color: #1a1a1a; @grey-color: #2C2C2C; @placeholder-color: #6e6e6e; @disable-color: #B3B3B3; diff --git a/less/progress.less b/less/progress.less index 6d9d39d..df0879e 100644 --- a/less/progress.less +++ b/less/progress.less @@ -18,6 +18,7 @@ .hook-progress-bar() { border-radius: @progress-border-radius; + transition: none; } .hook-progress-misc() { @@ -46,7 +47,11 @@ background-color: @inverse-progress-background; } - .uk-progress::-webkit-progress-value, .uk-progress::-moz-progress-bar { + .uk-progress::-moz-progress-bar { + background-color: @inverse-progress-bar-background; + } + + .uk-progress::-webkit-progress-value { background-color: @inverse-progress-bar-background; } } diff --git a/less/section.less b/less/section.less index 0b7eb25..0267a0b 100644 --- a/less/section.less +++ b/less/section.less @@ -2,4 +2,4 @@ @section-primary-background: @global-primary-gradient; /** Secondary*/ -@section-secondary-background: @global-color; +@section-secondary-background: @black-color; diff --git a/less/variables.less b/less/variables.less index d81b009..bed6aa6 100644 --- a/less/variables.less +++ b/less/variables.less @@ -12,13 +12,13 @@ /** Colors */ @global-color: @grey-color; -@global-emphasis-color: @dark-color; +@global-emphasis-color: @black-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; -@global-overlay-background: fade(@dark-color, 60%); +@global-overlay-background: fade(@black-color, 60%); /** Backgrounds */ @global-background: @default-color; @@ -26,6 +26,7 @@ @global-muted-background: @muted-color; @global-primary-background: @primary-color; @global-secondary-background: @secondary-color; +@global-dark-background: @dark-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%); From fd101a6b54f7b8b36bdef015d77365fb41a353df Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 6 Oct 2023 14:49:41 +0300 Subject: [PATCH 08/10] Fix secondary-section-color --- less/section.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/section.less b/less/section.less index 0267a0b..3212e8d 100644 --- a/less/section.less +++ b/less/section.less @@ -2,4 +2,4 @@ @section-primary-background: @global-primary-gradient; /** Secondary*/ -@section-secondary-background: @black-color; +@section-secondary-background: @global-dark-background; From fe7394ea9ed4319a3234a00b0c8ce09023f50799 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 6 Oct 2023 20:06:34 +0300 Subject: [PATCH 09/10] Fix advanced-input in advanced search input --- less/input.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/input.less b/less/input.less index 0a3f731..b1a94de 100644 --- a/less/input.less +++ b/less/input.less @@ -306,7 +306,7 @@ --input-placeholder-color: @global-color; --input-border-radius: 54px; --input-padding-horizontal: 30px; - --input-padding-vertical: 10px; + --input-padding-vertical: var(--search-input-icon-padding-vertical); --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; From 2dadcf85926bc0f11fff22ed94dc197ddd8587c6 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 10 Oct 2023 17:13:30 +0300 Subject: [PATCH 10/10] Remove hover from slider and change inverse color on dark backgrounds. --- less/inverse.less | 2 +- less/slider.less | 12 +----------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/less/inverse.less b/less/inverse.less index bb55876..e9a656e 100644 --- a/less/inverse.less +++ b/less/inverse.less @@ -1,6 +1,6 @@ /* Dark Background: Use hook-inverse-misc in order to add styles in a dark background and use uk-light in a child */ -@inverse-global-color: @global-inverse-color; +@inverse-global-color: @global-background; .dark { .hook-inverse-misc(); diff --git a/less/slider.less b/less/slider.less index 5bc2dc3..f077de5 100644 --- a/less/slider.less +++ b/less/slider.less @@ -6,13 +6,11 @@ @slider-nav-item-margin: @global-small-margin; @slider-nav-item-padding: 20px 30px; @slider-nav-item-border-radius: @global-border-radius; -@slider-nav-item-background-hover: @ciel-color; @slider-nav-item-background-active: @ciel-color; @slider-nav-item-action-size: @icon-button-small-size; @slider-nav-item-action-background: @global-background; -@inverse-slider-nav-item-background-hover: fade(@global-inverse-color, 15%); -@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 15%); +@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 5%); .mobile(@link-color: @global-link-color, @link-color-hover: @global-link-hover-color) { @media (max-width: @breakpoint-medium-max) { @@ -107,10 +105,6 @@ } } - & > *:hover { - background: @slider-nav-item-background-hover; - } - & > .uk-active { background: @slider-nav-item-background-active; @@ -135,10 +129,6 @@ & slider-nav-item { - & > *:hover { - background: @inverse-slider-nav-item-background-hover; - } - & > .uk-active { box-shadow: 10px 10px 25px #0000001A; background: @inverse-slider-nav-item-background-active;