rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyled accordion headers

Browse source
This commit is contained in:
Joel Collins 2019-09-19 16:56:29 +01:00
parent f8bb26b130
commit 570337ad04
2 changed files with 43 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/assets/less/theme.less
View file

@ -16,7 +16,7 @@
// ========================================================================
@global-font-family: ProximaNova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@global-font-size: 15px;
@global-font-size: 14px;
@global-xxlarge-font-size: 38px;
@global-xlarge-font-size: 30px;
@ -270,4 +270,45 @@
.uk-icon-button, .uk-icon-button:hover {
text-decoration: none
}
/*
* Accordion
*/
.uk-accordion-title {
display: block;
font-size: @global-font-size;
line-height: 1.4;
color: #333;
font-weight: 500;
}
.uk-accordion-title::before {
content: "";
width: 1.4em;
height: 1.4em;
float: left;
margin: 0 2px 0 0;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
mask-position: 100% 50%;
background-image: none;
background-color: #333;
}
.uk-open > .uk-accordion-title::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-position: 100% 50%;
background-image: none;
}
.uk-accordion-content {
margin-top: 10px;
}
.hook-inverse() {
.uk-accordion-title::before {
background-color: #fff;
}
}

2
src/components/panelLeft.vue
View file

@ -4,7 +4,7 @@
<!-- Vertical tab bar -->
<div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
<tabIcon id="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">thumbs_up_down</i>
<i class="material-icons">bug_report</i>
</tabIcon>
<tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
<i class="material-icons">gamepad</i>