Commit 570337ad authored by Joel Collins's avatar Joel Collins
Browse files

Restyled accordion headers

parent f8bb26b1

src/assets/less/theme.less

+42 −1
Original line number Diff line number Diff line
@@ -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;
@@ -271,3 +271,44 @@ 
.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;

    }



}
 
 No newline at end of file

src/components/panelLeft.vue

+1 −1
Original line number Diff line number Diff line
@@ -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>