MaDgIK
/
openaire-theme
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request 'Angular & UIkit Upgrade' (#6) from develop into master 

Reviewed-on: #6
This commit is contained in:
Konstantinos Triantafyllou 2023-11-06 10:04:48 +01:00
parent ac458b5a6d 5e8c1addb1
commit 9218026420
13 changed files with 188 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
less/_import.less vendored
View File

@ -33,6 +33,7 @@
// JavaScript
@import "accordion";
@import "drop";
@import "dropdown";
@import "modal";
@import "slider";

3
less/color.less
View File

@ -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;

1
less/drop.less Normal file
View File

@ -0,0 +1 @@
@drop-z-index: @global-z-index - 19;

1
less/dropdown.less
View File

@ -1,4 +1,3 @@
@dropdown-z-index: @global-z-index - 19;
@dropdown-min-width: 260px;
@dropdown-padding: 5px 0;
@dropdown-background: @global-background;

52
less/input.less
View File

@ -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;
}
@ -298,8 +306,7 @@
--input-placeholder-color: @global-color;
--input-border-radius: 54px;
--input-padding-horizontal: 30px;
--input-padding-vertical: 10px;
--input-font-size: 14px;
--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;
@ -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 {

2
less/inverse.less
View File

@ -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();

38
less/modal.less
View File

@ -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 {

25
less/nav.less
View File

@ -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 {

2
less/offcanvas.less
View File

@ -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;

18
less/progress.less
View File

@ -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;
@ -15,6 +18,7 @@
.hook-progress-bar() {
border-radius: @progress-border-radius;
transition: none;
}
.hook-progress-misc() {
@ -37,3 +41,17 @@
}
}
}
.hook-inverse() {
.uk-progress {
background-color: @inverse-progress-background;
}
.uk-progress::-moz-progress-bar {
background-color: @inverse-progress-bar-background;
}
.uk-progress::-webkit-progress-value {
background-color: @inverse-progress-bar-background;
}
}

2
less/section.less
View File

@ -2,4 +2,4 @@
@section-primary-background: @global-primary-gradient;
/** Secondary*/
@section-secondary-background: @global-color;
@section-secondary-background: @global-dark-background;

106
less/slider.less
View File

@ -2,6 +2,48 @@
@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-active: @ciel-color;
@slider-nav-item-action-size: @icon-button-small-size;
@slider-nav-item-action-background: @global-background;
@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) {
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 +73,68 @@
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;
}
}
}
& > .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 {
& > .uk-active {
box-shadow: 10px 10px 25px #0000001A;
background: @inverse-slider-nav-item-background-active;
}
}
}
.mobile(@inverse-base-link-color, @inverse-base-link-color);
}

5
less/variables.less
View File

@ -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%);