From c002ceccbdc7353bd5c247e11b6d8a2f15c7ac30 Mon Sep 17 00:00:00 2001 From: Joel Collins Date: Mon, 10 Jun 2019 17:02:35 +0100 Subject: [PATCH] Started custom theming through LESS --- src/assets/less/theme.less | 384 ++++--------------------------------- src/components/tabIcon.vue | 11 +- 2 files changed, 43 insertions(+), 352 deletions(-) diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less index f9ec1d7b..d13bd7b1 100644 --- a/src/assets/less/theme.less +++ b/src/assets/less/theme.less @@ -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; +/* + * Links + */ +.uk-link:hover, a:hover { + color: @global-primary-background; +} + +.hook-inverse() { + .uk-link:hover, a:hover { + color: @inverse-primary-muted-color; } } -.tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; } - /* - * Nav + * Buttons */ - -.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; -} - -.tm-nav .uk-nav-header { - padding: 8px 0; - border-bottom: 1px solid @global-border; -} - -/* - * 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() - */ - -.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 {} +/* +.uk-button-primary { + background-color: rgba(180, 180, 180, 0.1); + color: @global-primary-background; + border: 1px solid @global-primary-background; +} + */ +.uk-button-danger { + background-color: transparent; + color: #f0506e; + border: 1px solid #f0506e; +} .hook-inverse() { - - .tm-button-default { - color: @inverse-global-color; - border-color: @inverse-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; } - .tm-button-primary { - background: #fff !important; - color: @global-primary-background !important; + .uk-button-primary:hover { + background-color: @inverse-primary-muted-color; + color: #fff; } - - .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%; -} - -/* - * Heading - */ - -.tm-h4, -.tm-h5, -.tm-h6 { - font-family: Montserrat; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 2px; - color: @global-muted-color; -} - -.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; - } - -} - - -/* 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 diff --git a/src/components/tabIcon.vue b/src/components/tabIcon.vue index bbead888..2d892a16 100644 --- a/src/components/tabIcon.vue +++ b/src/components/tabIcon.vue @@ -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; + } +} + \ No newline at end of file