fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify show-hide js util toggles

Browse Source
This commit is contained in:
Felix Hamann 2019-03-03 21:13:51 +01:00
parent f7efd0433c
commit e8f0aacaca
3 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/css/utils/asidenav.scss
View File

@ -57,7 +57,7 @@
padding-left: 10px; padding-left: 10px;
&.js-show-hide__toggle::before { &.js-show-hide__toggle::before {
top: 25px; z-index: 1;
} }
} }
} }
@ -103,7 +103,6 @@
&::before { &::before {
left: auto; left: auto;
right: 20px; right: 20px;
top: 30px;
color: var(--color-font); color: var(--color-font);
} }
} }
@ -314,6 +313,10 @@
word-break: break-all; word-break: break-all;
background-color: var(--color-dark); background-color: var(--color-dark);
color: var(--color-lightwhite); color: var(--color-lightwhite);
&:hover {
background-color: var(--color-dark);
}
} }
.asidenav__link-shorthand { .asidenav__link-shorthand {

28
static/css/utils/showHide.scss
View File

@ -1,22 +1,30 @@
$show-hide-toggle-size: 6px;
.js-show-hide__toggle { .js-show-hide__toggle {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 3px 7px;
&:hover {
background-color: var(--color-grey-lighter);
cursor: pointer;
}
} }
.js-show-hide__toggle::before { .js-show-hide__toggle::before {
content: ''; content: '';
position: absolute; position: absolute;
width: 0; width: $show-hide-toggle-size;
height: 0; height: $show-hide-toggle-size;
left: -28px; left: -15px;
top: 6px; top: 12px - $show-hide-toggle-size / 2;
color: var(--color-primary); color: var(--color-primary);
border-right: 8px solid transparent; border-right: 2px solid currentColor;
border-top: 8px solid transparent; border-top: 2px solid currentColor;
border-left: 8px solid transparent;
border-bottom: 8px solid currentColor;
transition: transform .2s ease; transition: transform .2s ease;
transform-origin: 8px 12px; transform-origin: ($show-hide-toggle-size / 2);
transform: translateY($show-hide-toggle-size) rotate(-45deg);
} }
.js-show-hide__target { .js-show-hide__target {
@ -26,7 +34,7 @@
.js-show-hide--collapsed { .js-show-hide--collapsed {
.js-show-hide__toggle::before { .js-show-hide__toggle::before {
transform: rotate(180deg); transform: translateY($show-hide-toggle-size / 3) rotate(135deg);
} }
.js-show-hide__target { .js-show-hide__target {

1
templates/default-layout.lucius
View File

@ -8,6 +8,7 @@
--color-lightwhite: #fcfffa; --color-lightwhite: #fcfffa;
--color-grey: #B1B5C0; --color-grey: #B1B5C0;
--color-grey-light: #efefef; --color-grey-light: #efefef;
--color-grey-lighter: #f5f5f5;
--color-grey-medium: #9A989E; --color-grey-medium: #9A989E;
--color-font: #34303a; --color-font: #34303a;
--color-fontsec: #5b5861; --color-fontsec: #5b5861;