Change offcanvas class to uk-offcanvas. Less: Fix tab border bottom, buttons control heights, dropdown, offcanvas, import variables file
This commit is contained in:
parent
5b29aadb4a
commit
69817f8b1f
|
|
@ -4,7 +4,7 @@
|
|||
--offcanvas-button-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.offcanvas-switcher {
|
||||
.uk-offcanvas-switcher {
|
||||
top: 320px !important;
|
||||
position: fixed;
|
||||
width: 60px;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
clip-path: inset(-30px 0px -30px -30px);
|
||||
}
|
||||
|
||||
.offcanvas-switcher .offcanvas-count {
|
||||
.uk-offcanvas-switcher .uk-offcanvas-count {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -37,16 +37,11 @@
|
|||
}
|
||||
|
||||
|
||||
.offcanvas .uk-offcanvas-bar {
|
||||
.uk-offcanvas .uk-offcanvas-bar {
|
||||
background-color: var(--offcanvas-background-color);
|
||||
box-shadow: var(--offcanvas-shadow);
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 0;
|
||||
width: 550px;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
.offcanvas .uk-offcanvas-flip .uk-offcanvas-bar {
|
||||
right: -550px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import "~uikit/src/less/components/variables";
|
||||
@import "~src/assets/openaire-theme/less/variables";
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
// Base
|
||||
@import "fonts";
|
||||
@import "color";
|
||||
@import "variables";
|
||||
@import "base";
|
||||
|
||||
|
|
@ -30,16 +29,14 @@
|
|||
|
||||
// JavaScript
|
||||
//@import "accordion";
|
||||
//@import "drop";
|
||||
@import "dropdown";
|
||||
@import "modal";
|
||||
//@import "sticky";
|
||||
//@import "offcanvas";
|
||||
@import "offcanvas";
|
||||
//@import "switcher";
|
||||
//@import "leader";
|
||||
@import "notification";
|
||||
@import "tooltip";
|
||||
//@import "sortable";
|
||||
@import "sortable";
|
||||
|
||||
// Navs
|
||||
@import "nav";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@button-font-size: @global-small-font-size;
|
||||
@button-small-font-size: @global-small-font-size - 1px;
|
||||
@button-small-font-size: @global-small-font-size - 2px;
|
||||
@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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@dropdown-min-width: 260px;
|
||||
@dropdown-min-width: 200px;
|
||||
@dropdown-padding: 5px 0;
|
||||
@dropdown-background: @global-background;
|
||||
@dropdown-border-width: @global-border-width;
|
||||
|
|
|
|||
|
|
@ -39,6 +39,18 @@
|
|||
}
|
||||
|
||||
.hook-form-misc() {
|
||||
input[type="checkbox"] {
|
||||
&:extend(.uk-checkbox);
|
||||
&:focus:extend(.uk-checkbox:focus) {}
|
||||
&:checked:extend(.uk-checkbox:checked) {}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
&:extend(.uk-radio);
|
||||
&:focus:extend(.uk-radio:focus) {}
|
||||
&:checked:extend(.uk-radio:checked) {}
|
||||
}
|
||||
|
||||
[style*="visibility: hidden"] .input-wrapper {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
@offcanvas-switcher-border-radius: @global-border-radius;
|
||||
@offcanvas-switcher-box-shadow: @global-medium-box-shadow;
|
||||
@offcanvas-switcher-size: @global-control-large-height;
|
||||
@offcanvas-switcher-top: 320px;
|
||||
@offcanvas-switcher-padding: 4px;
|
||||
@offcanvas-switcher-z-index: @global-z-index - 20;
|
||||
@offcanvar-switcher-background: @global-background;
|
||||
|
||||
@offcanvas-count-size: 20px;
|
||||
@offcanvas-count-font-size: @global-small-font-size - 2px;
|
||||
@offcanvas-count-padding: 1px;
|
||||
@offcanvas-count-border-radius: 500px;
|
||||
@offcanvas-count-background: @global-secondary-background;
|
||||
@offcanvas-count-color: @global-inverse-color;
|
||||
|
||||
@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-border-radius: @global-small-border-radius;
|
||||
@offcanvas-bar-background: @global-background;
|
||||
@offcanvas-bar-box-shadow: @global-large-box-shadow;
|
||||
@offcanvas-bar-color-mode: dark;
|
||||
|
||||
@offcanvas-close-position: 30px;
|
||||
|
||||
@offcanvas-overlay-background: fade(@global-color, 50%);
|
||||
|
||||
.hook-offcanvas-misc() {
|
||||
|
||||
.uk-offcanvas-flip .uk-offcanvas {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.uk-offcanvas-flip .uk-offcanvas-bar {
|
||||
left: auto !important;
|
||||
right: -@offcanvas-bar-width !important;
|
||||
}
|
||||
|
||||
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
|
||||
transition-property: right !important;
|
||||
}
|
||||
|
||||
.uk-offcanvas-switcher {
|
||||
top: @offcanvas-switcher-top;
|
||||
position: fixed;
|
||||
width: @offcanvas-switcher-size;
|
||||
height: @offcanvas-switcher-size;
|
||||
cursor: pointer;
|
||||
padding: @offcanvas-switcher-padding;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
z-index: @offcanvas-switcher-z-index;
|
||||
background: @offcanvar-switcher-background;
|
||||
border-radius: @offcanvas-switcher-border-radius 0 0 @offcanvas-switcher-border-radius;
|
||||
box-shadow: @offcanvas-switcher-box-shadow;
|
||||
clip-path: inset(-30px 0px -30px -30px);
|
||||
|
||||
& .uk-offcanvas-count {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: @offcanvas-count-font-size;
|
||||
line-height: @offcanvas-count-size;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
height: @offcanvas-count-size;
|
||||
width: @offcanvas-count-size;
|
||||
border-radius: @offcanvas-count-border-radius;
|
||||
padding: @offcanvas-count-padding;
|
||||
background-color: @offcanvas-count-background;
|
||||
color: @offcanvas-count-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.hook-sortable() {
|
||||
& > * {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,16 +15,19 @@
|
|||
@tab-item-active-color: @global-primary-background;
|
||||
|
||||
.hook-tab() {
|
||||
border-bottom: @tab-border-width solid @tab-border;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "color";
|
||||
|
||||
/** Typography */
|
||||
@global-font-family: Aileron;
|
||||
@global-font-size: 16px;
|
||||
|
|
@ -46,9 +48,9 @@
|
|||
@global-xsmall-margin: 5px;
|
||||
|
||||
/* Controls */
|
||||
@global-control-small-height: 40px;
|
||||
@global-control-height: 48px;
|
||||
@global-control-large-height: 56px;
|
||||
@global-control-small-height: 30px;
|
||||
@global-control-height: 40px;
|
||||
@global-control-large-height: 50px;
|
||||
|
||||
/* Breakpoints */
|
||||
@breakpoint-small: 481px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue