Add new uikit js. Add pills alternative. Add shadows, width. Rename some variables to start with the file name

This commit is contained in:
Konstantinos Triantafyllou 2022-03-14 18:19:41 +02:00
parent d9750df104
commit de51fea2dd
12 changed files with 115 additions and 56 deletions

View File

@ -1,35 +1,4 @@
/*
!* 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: 500; src: url("../media/fonts/aileron/aileron-mediumitalic.eot"); src: url("../media/fonts/aileron/aileron-mediumitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-mediumitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-mediumitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-mediumitalic.ttf") format('truetype'); }
@font-face { font-family: "aileron"; font-style: normal; font-weight: 500; src: url("../media/fonts/aileron/aileron-medium.eot"); src: url("../media/fonts/aileron/aileron-medium.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-medium.woff2") format('woff2'), url("../media/fonts/aileron/aileron-medium.woff") format('woff'), url("../media/fonts/aileron/aileron-medium.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 */ /* Material Icons */
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400;
src: url("../media/fonts/material-icons/MaterialIcons-Regular.eot"); src: url("../media/fonts/material-icons/MaterialIcons-Regular.eot");
src: local('Material Icons'), local('MaterialIcons-Regular'), src: local('Material Icons'), local('MaterialIcons-Regular'),

4
css/import.css vendored
View File

@ -16,9 +16,11 @@
@import "structure/list.css"; @import "structure/list.css";
@import "structure/navbar.css"; @import "structure/navbar.css";
@import "structure/pill.css"; @import "structure/pill.css";
@import "structure/shadow.css";
@import "structure/slider.css"; @import "structure/slider.css";
@import "structure/text.css";
@import "structure/tab.css"; @import "structure/tab.css";
@import "structure/text.css";
@import "structure/width.css";
@import "openaire.css"; @import "openaire.css";

View File

@ -1,6 +1,6 @@
/* Overrides common to all dashboards*/ /* Overrides common to all dashboards*/
.graph { .graph {
--font-primary-color: var(--graph-color); --text-primary-color: var(--graph-color);
} }
.graph a { .graph a {

View File

@ -1,26 +1,26 @@
:root{ :root{
--primary-background: var(--primary-color); --background-primary: var(--primary-color);
--primary-background-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%); --background-primary-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
--primary-background-color: var(--light-color); --background-primary-color: var(--light-color);
--secondary-background: var(--secondary-color); --background-secondary: var(--secondary-color);
--secondary-background-image: none; --background-secondary-image: none;
--secondary-background-color: var(--light-color); --background-secondary-color: var(--light-color);
} }
.uk-background-primary, .uk-section-primary { .uk-background-primary, .uk-section-primary {
background-color: var(--primary-background); background-color: var(--background-primary);
background-image: var(--primary-background-image); background-image: var(--background-primary-image);
} }
.uk-background-primary, .uk-section-primary:not(.uk-preserve-color) { .uk-background-primary, .uk-section-primary:not(.uk-preserve-color) {
color: var(--primary-background-color); color: var(--background-primary-color);
} }
.uk-background-secondary, .uk-section-secondary { .uk-background-secondary, .uk-section-secondary {
background-color: var(--secondary-background); background-color: var(--background-secondary);
background-image: var(--secondary-background-image); background-image: var(--background-secondary-image);
} }
.uk-background-secondary, .uk-section-secondary:not(.uk-preserve-color) { .uk-background-secondary, .uk-section-secondary:not(.uk-preserve-color) {
color: var(--secondary-background-color); color: var(--background-secondary-color);
} }

View File

@ -6,8 +6,9 @@
--navbar-decoration-hover: none; --navbar-decoration-hover: none;
--navbar-color-active: var(--primary-color); --navbar-color-active: var(--primary-color);
--navbar-decoration-active: none; --navbar-decoration-active: none;
--navbar-height: 90px; --navbar-height: 65px;
--navbar-shadow: 0px 3px 6px #0000001A; --navbar-shadow: 0px 3px 6px #0000001A;
--navbar-font-size: 14px;
} }
navbar .uk-navbar-container { navbar .uk-navbar-container {
@ -17,6 +18,7 @@ navbar .uk-navbar-container {
height: var(--navbar-height); height: var(--navbar-height);
border-bottom: none !important; border-bottom: none !important;
box-shadow: var(--navbar-shadow); box-shadow: var(--navbar-shadow);
font-size: 14px;
} }
.uk-navbar-container .uk-logo { .uk-navbar-container .uk-logo {

View File

@ -1,5 +1,57 @@
:root { :root {
/* Alternative Pills*/ /* Alternative Pills*/
--pill-alt-color: var(--grey-color); --pill-alt-color: var(--placeholder-color);
--pill-alt-background: var(--secondary-color); --pill-alt-background: var(--light-color);
--pill-alt-shadow: var(--shadow-main);
--pill-alt-color-hover: var(--secondary-color);
--pill-alt-background-active: none;
--pill-alt-background-active-image: linear-gradient(122deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);
--pill-alt-color-active: var(--light-color);
}
.uk-subnav-pill > .uk-active > a {
border: unset;
}
.uk-subnav-pill-alt {
background: var(--pill-alt-background);
border-radius: 56px;
box-shadow: var(--pill-alt-shadow);
padding: 4px;
}
.uk-subnav-pill-alt > * > :first-child {
padding: 10px 20px;
color: var(--pill-alt-color);
border-radius: 56px;
}
.uk-subnav.uk-subnav-pill-alt > :first-child {
padding-left: 0;
}
.uk-subnav-pill-alt > :hover > a {
color: var(--pill-alt-color-hover);
border-color: unset;
position: relative;
}
.uk-subnav-pill-alt > :hover > a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--pill-alt-background-active);
background-image: var(--pill-alt-background-active-image);
opacity: 0.1;
border-radius: inherit;
}
.uk-subnav-pill-alt > .uk-active > a {
background-color: var(--pill-alt-background-active);
color: var(--pill-alt-color-active);
border-color: unset;
background-image: var(--pill-alt-background-active-image);
} }

3
css/structure/shadow.css Normal file
View File

@ -0,0 +1,3 @@
:root {
--shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
}

View File

@ -1,16 +1,16 @@
:root { :root {
--font-default-color: var(--grey-color); --text-default-color: var(--grey-color);
--font-primary-color: var(--primary-color); --text-primary-color: var(--primary-color);
--font-secondary-color: var(--secondary-color); --text-secondary-color: var(--secondary-color);
--font-gradient-color: none; --text-gradient-color: none;
} }
.uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary { .uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary {
color: var(--font-primary-color) !important; color: var(--text-primary-color) !important;
} }
.uk-text-primary-gradient { .uk-text-primary-gradient {
background: var(--font-gradient-color); background: var(--text-gradient-color);
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-background-clip: text; -webkit-background-clip: text;
} }

29
css/structure/width.css Normal file
View File

@ -0,0 +1,29 @@
/** This class applies a width of 75px. */
.uk-width-xsmall {
width: 100px;
}
/**/
@media only screen and (min-width: 640px) {
.uk-width-xsmall\@s {
width: 100px;
}
}
@media only screen and (min-width: 960px) {
.uk-width-xsmall\@m {
width: 100px;
}
}
@media only screen and (min-width: 1200px) {
.uk-width-xsmall\@l {
width: 100px;
}
}
@media only screen and (min-width: 1600px) {
.uk-width-xsmall\@xl {
width: 100px;
}
}

File diff suppressed because one or more lines are too long

1
js/uikit-icons.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
js/uikit.min.js vendored Normal file

File diff suppressed because one or more lines are too long