Commit c002cecc authored by Joel Collins's avatar Joel Collins
Browse files

Started custom theming through LESS

parent 2357223a

src/assets/less/theme.less

+27 −343
Original line number Diff line number Diff line
@@ -9,7 +9,8 @@ 


// Custom OpenFlexure theming

@global-primary-background: #C32280;

@global-button-background: #C32280;



@inverse-primary-muted-color: lighten(@global-primary-background, 15%);



// UIkit

// ========================================================================
@@ -125,7 +126,6 @@ 
@inverse-global-muted-color:                    fade(@global-inverse-color, 60%);







/* ========================================================================

   Theme

 ========================================================================== */
@@ -138,103 +138,14 @@ 
@sidebar-right-left-xl:  60px;





/* HTML

 ========================================================================== */



/*

 * Force vertical scrollbar

 * 1. `overflow-x` has to be on the `body` element for Safari to prevent horizontal scrolling on touch

      This causes a random bug showing a vertical scrollbar in combination with some fonts like `Poppins`

      This is why `overflow-y` must also be set to `hidden`

 */



html { overflow-y: scroll; }



/* 1 */

body { overflow: hidden; }





/* Documentation Sidebars

 ========================================================================== */



/*

 * Sidebar Left

 */



.tm-sidebar-left {

    position: fixed;

    top: @navbar-nav-item-height;

    bottom: 0;

    box-sizing: border-box;

    width: @sidebar-left-width !important;

    padding: 40px 40px 60px 40px;

    border-right: 1px @global-border solid;

    overflow: auto;

}



/*

 * Sidebar Right

 */



.tm-sidebar-right {

    position: absolute;

    top: 0;

    left: ~'calc(100% + @{sidebar-right-left})';

    width: @sidebar-right-width;

}



/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {



    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width; }



}



/* Desktop and bigger */

@media (min-width: @breakpoint-large) {



    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left})'; }



    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width - (@sidebar-right-width + @sidebar-right-left); }



}



/* Large screen and bigger */

@media (min-width: 1400px) {



    .tm-sidebar-left {

        width: @sidebar-left-width-xl !important;

        padding: 45px 45px 60px 45px;

    }



    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left-xl})'; }



    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width-xl - (@sidebar-right-width + @sidebar-right-left-xl); }



}





/* UIkit modifier

/* UIkit modifiers

 ========================================================================== */



/*

 * Navbar

 */



.tm-navbar-container:not(.uk-navbar-transparent) {

    background: linear-gradient(to left, #28a5f5, @global-primary-background);

}



.tm-navbar-container .uk-navbar-nav > li > a,

.tm-navbar-container .uk-navbar-item:not(.uk-logo),

.tm-navbar-container .uk-navbar-toggle {

    height: 70px;

    font-size: 13px;

}



// Color Mode

.tm-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) {}



// Line Mode

@navbar-nav-item-line-margin-vertical:          20px;

@navbar-nav-item-line-margin-horizontal:        @navbar-nav-item-padding-horizontal;
@@ -242,275 +153,48 @@ body { overflow: hidden; } 
@navbar-nav-item-line-background:               currentColor;

@navbar-nav-item-line-transition-duration:      0.3s;



.tm-navbar-container .uk-navbar-nav > li > a {

    position: relative;



    &::before {

        content: '';

        display: block;

        position: absolute;

        left: @navbar-nav-item-line-margin-horizontal;

        right: ~'calc(102% - @{navbar-nav-item-line-margin-horizontal})';

        bottom: @navbar-nav-item-line-margin-vertical;

        height: @navbar-nav-item-line-height;

        background-color: @navbar-nav-item-line-background;

        transition: @navbar-nav-item-line-transition-duration ease-in-out;

        transition-property: right;

    }

}



.tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; }



/*

 * Nav

 * Links

 */



.tm-nav > li.uk-active > a { position: relative; }



.tm-nav > li.uk-active > a:before {

    content: "";

    position: absolute;

    top: 15px;

    left: -25px;

    width: 15px;

    border-top: 1px solid @global-primary-background;

.uk-link:hover, a:hover {

    color: @global-primary-background;

}



.tm-nav .uk-nav-header {

    padding: 8px 0;

    border-bottom: 1px solid @global-border;

.hook-inverse() {

    .uk-link:hover, a:hover {

        color: @inverse-primary-muted-color;

    }



/*

 * Subnav

 */



/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {



    .tm-subnav { margin-left: -50px; }

    .tm-subnav > * { padding-left: 50px; }



}



.tm-subnav > * > :first-child { text-transform: capitalize; }



/*

 * Label (Changelog()

 * Buttons

 */



.tm-label-changelog {

    width: 80px;

    margin-top: 3px;

}



/*

 * Button and link

 */

.uk-link:hover, a:hover {

    color: @global-button-background;

}



.uk-button {

    border-radius: 2px;

}



.tm-button-default,

.tm-button-primary { border-radius: 500px; }



.tm-button-default {}



.tm-button-large { line-height: 48px; }



.tm-button-primary {}



.hook-inverse() {



    .tm-button-default {

        color: @inverse-global-color;

        border-color: @inverse-global-muted-color;

    }



    .tm-button-primary {

        background: #fff !important;

        color: @global-primary-background !important;

    }



    .tm-button-primary:hover { box-shadow: 0 10px 40px @global-button-background; }



}



/*

 * Section

 */



.tm-section-primary {

    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;

}



.tm-section-intro {

    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat,

                #fff;

    background-size: 100% 75%;

.uk-button-primary {

    background-color: rgba(180, 180, 180, 0.1);

    color: @global-primary-background;

    border: 1px solid @global-primary-background;

}



/*

 * Heading

 */



.tm-h4,

.tm-h5,

.tm-h6 {

    font-family: Montserrat;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: @global-muted-color;

.uk-button-danger {

    background-color: transparent;

    color: #f0506e;

    border: 1px solid #f0506e;

}



.tm-h4 { font-size: 14px; }

.tm-h5 { font-size: 12px; }

.tm-h6 { font-size: 11px; }



.hook-inverse() {



    .tm-h4,

    .tm-h5,

    .tm-h6 { color: rgba(255, 255, 255, 0.7); }



}



/*

 * Text

 */



.tm-text-large { font-size: 18px; }



/*

 * Box shadow

 */



.tm-box-shadow-medium {

    box-shadow: 2px 12px 35px rgba(0,0,0,0.1),

                0 1px 6px rgba(0,0,0,0.05);

}



.tm-box-shadow-large {

    box-shadow: -40px 40px 160px 0 rgba(0,0,0,0.08),

                -8px 8px 15px 0 rgba(120,120,120,0.04),

                3px 3px 30px 0 rgba(0,0,0,0.04);

}



.tm-box-shadow-modal { box-shadow: 3px 3px 40px 0 rgba(0,0,0,0.06); }



/*

 * Overlay

 */



.tm-overlay-default { background: fade(@global-background, 50%); }



/*

 * Modal

 */



.tm-modal-dialog { background: @global-muted-background; }



.tm-modal-header { padding: 20px 30px; }

.tm-modal-body { padding: 0; }



/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {



    .tm-modal-header { padding: 25px 50px; }

    .tm-modal-body { padding: 0 50px; }



}



/* Desktop and bigger */

@media (min-width: @breakpoint-xlarge) {



    .tm-modal-header { padding: 50px 120px; }

    .tm-modal-body { padding: 0 120px; }



}



.tm-modal-close-full {

    background: transparent;

    padding: 30px;

}



/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {



    .tm-modal-close-full { padding: @global-medium-margin; }



}



/* Utilities

 ========================================================================== */



/*

 * Heading fragment

 */



.tm-heading-fragment > a {

    color: inherit;

    text-decoration: none;

}



/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {



    h2.tm-heading-fragment > a:before {

        content: "#";

        position: absolute;

        width: 25px;

        margin-left: -25px;

        color: @global-muted-color;

    .uk-button-primary{

        background-color: rgba(180, 180, 180, 0.1);

        color: @inverse-primary-muted-color;

        border-color: @inverse-primary-muted-color;

    }



    .uk-button-primary:hover {

        background-color: @inverse-primary-muted-color;

        color: #fff;

    }





/* Reset container for docs

 ========================================================================== */



.tm-main .uk-container {

    padding-left: @container-padding-horizontal;

    padding-right: @container-padding-horizontal;

}



/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {



    .tm-main .uk-container {

        padding-left: @container-padding-horizontal-s;

        padding-right: @container-padding-horizontal-s;

    }



}



/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {



    .tm-main .uk-container {

        padding-left: @container-padding-horizontal-m;

        padding-right: @container-padding-horizontal-m;

    }



}





/* Pro

 ========================================================================== */



/* Desktop and bigger */

@media (min-width: @breakpoint-large) {

    .tm-intro-text { margin-top: 30px; }

}



/* Large screen and bigger */

@media (min-width: @breakpoint-xlarge) {

    .tm-intro-text { margin-top: 90px; }

    .tm-intro-image { margin-right: -75px; }

}
 
 No newline at end of file

src/components/tabIcon.vue

+9 −2
Original line number Diff line number Diff line
@@ -28,7 +28,7 @@ export default { 


  computed: {

    tooltipOptions: function () {

      return `pos: right; title: ${this.name}`

      return `pos: right; title: ${this.name}; delay: 500`

    },



    classObject: function () {
@@ -48,6 +48,13 @@ export default { 
@import "../assets/less/theme.less";



.tabicon-active {

  color: @global-button-background !important;

  color: @global-primary-background !important;

}



.hook-inverse() {

    .tabicon-active {

        color: @inverse-primary-muted-color !important;

    }

}



</style>
 
 No newline at end of file