Add accordion to the theme.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-17 19:46:35 +03:00
parent 643ff6aa69
commit 91ffc2ccce
8 changed files with 63 additions and 17 deletions

4
less/_import.less vendored
View File

@ -28,12 +28,10 @@
@import "search";
// JavaScript
//@import "accordion";
@import "accordion";
@import "dropdown";
@import "modal";
@import "offcanvas";
//@import "switcher";
//@import "leader";
@import "notification";
@import "tooltip";
@import "sortable";

View File

@ -0,0 +1,30 @@
@accordion-title-padding-vertical: 5px;
@accordion-title-padding-horizontal: 0;
@accordion-title-background: transparent;
@accordion-title-color: @global-emphasis-color;
@accordion-title-hover-color: @global-primary-background;
@accordion-title-font-weight: 600;
@accordion-icon-margin-left: 10px;
.hook-accordion-title() {
padding: @accordion-title-padding-vertical @accordion-title-padding-horizontal;
background: @accordion-title-background;
overflow: hidden;
font-weight: @accordion-title-font-weight;
&::before {
content: "\e145";
font-family: "Material Icons";
font-size: 1.2*@accordion-title-font-size;
margin-left: @accordion-icon-margin-left;
float: right;
}
}
.hook-accordion-misc() {
.uk-open > .uk-accordion-title::before {
content: "\e15b"
}
}

View File

@ -3,7 +3,7 @@
@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-hover-box-shadow: @global-small-box-shadow;
@card-default-header-border-width: @global-border-width;
@card-default-header-border: @global-border;
@card-default-footer-border-width: @global-border-width;
@ -13,7 +13,7 @@
@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-box-shadow: @global-small-box-shadow;
@card-primary-hover-background-gradient: @global-primary-gradient;
@card-secondary-background: @global-muted-background;
@ -21,12 +21,21 @@
@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;
@card-secondary-hover-box-shadow: @global-small-box-shadow;
@card-disabled-box-shadow: none;
@card-disabled-border: @global-border;
@card-disabled-border-width: @global-border-width;
.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;
&.uk-disabled {
box-shadow: @card-disabled-box-shadow;
border: @card-disabled-border-width solid @card-disabled-border;
}
}
.hook-card-header() {

View File

@ -37,7 +37,7 @@
@monitor-light-color: #8BCC00;
@monitor-dark-color: #228001;
/* Connect */
@connect-color: #EBB13E;
@connect-color: #FECA1D;
@connect-light-color: #FECA1D;
@connect-dark-color: #FE9F1D;
/* Graph */

View File

@ -36,6 +36,12 @@
label, select {
cursor: pointer;
}
button, input, select, textarea {
line-height: inherit;
font-size: 100%;
vertical-align: middle;
}
}
.hook-form-misc() {

View File

@ -1,5 +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;
.dark {
.hook-inverse-misc();

View File

@ -1,17 +1,19 @@
@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;
}
.hook-utility-misc() {
/* Box-shadow */
.uk-box-shadow-default, .uk-box-shadow-default-hover:hover {
box-shadow: @global-default-shadow;
}
.uk-box-shadow-inner {
box-shadow: @global-inset-shadow;
}
.uk-box-shadow-inner, .uk-box-shadow-inner-hover:hover {
box-shadow: @global-inset-shadow;
}
.uk-box-no-shadow {
box-shadow: none;
.uk-box-no-shadow, .uk-box-no-shadow-hover:hover {
box-shadow: none;
}
}
/* Inverse */

View File

@ -6,7 +6,7 @@
@global-line-height: 24px;
@global-xsmall-font-size: 12px;
@global-small-font-size: 14px;
@global-medium-font-size: 20px;
@global-medium-font-size: 18px;
@global-large-font-size: 20px;
@global-xlarge-font-size: 34px;