From 19224d592a5b957089352aea4b0757421f5092a3 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Mon, 6 Jul 2020 12:45:09 +0200 Subject: [PATCH 01/11] Add optional icon only menu layout --- assets/sass/layout.scss | 42 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index e91200e..9aad28f 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -64,6 +64,7 @@ header { list-style: none; a, span { + position: relative; display: flex; flex-direction: row; align-items: center; @@ -72,7 +73,15 @@ header { .feather { --icon-size: 24px; - margin-right: 10px; + } + + &:hover { + .tip { + visibility: visible; + opacity: 1; + transition: opacity ease-out 100ms; + transition-delay: 150ms; + } } } @@ -129,9 +138,40 @@ header { &.open { transform: translateX(0%); } + + li a { + .tip { + display: block; + margin-left: 8px; + } + } } } } + + @media (min-width: $menuLayoutSwitchTreshold) { + nav ul li a .tip { + visibility: hidden; + position: absolute; + display: block; + width: max-content; + height: 30px; + padding: 4px 8px; + line-height: 22px; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + + text-align: center; + font-size: 18px; + color: $defaultTextColor; + opacity: 0; + transition: opacity ease-out 100ms, visibility step-end 150ms; + transition-delay: 0ms; + background-color: #000; + border-radius: 5px; + } + } } footer { From 8aad5210148792cae75a11f2f619e8c54f160045 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Mon, 6 Jul 2020 12:49:28 +0200 Subject: [PATCH 02/11] Fix last menu item tip overflowing out of document --- assets/sass/layout.scss | 46 ++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 9aad28f..9c179ec 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -150,26 +150,34 @@ header { } @media (min-width: $menuLayoutSwitchTreshold) { - nav ul li a .tip { - visibility: hidden; - position: absolute; - display: block; - width: max-content; - height: 30px; - padding: 4px 8px; - line-height: 22px; - top: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); + nav ul li { + a .tip { + visibility: hidden; + position: absolute; + display: block; + width: max-content; + height: 30px; + padding: 4px 8px; + line-height: 22px; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); - text-align: center; - font-size: 18px; - color: $defaultTextColor; - opacity: 0; - transition: opacity ease-out 100ms, visibility step-end 150ms; - transition-delay: 0ms; - background-color: #000; - border-radius: 5px; + text-align: center; + font-size: 18px; + color: $defaultTextColor; + opacity: 0; + transition: opacity ease-out 100ms, visibility step-end 150ms; + transition-delay: 0ms; + background-color: #000; + border-radius: 5px; + } + + &:last-child a .tip { + left: unset; + right: 4px; + transform: none; + } } } } From 9f3a541c3e2fac185152ca8b0c839539ecb7251c Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Mon, 25 Jan 2021 11:43:36 +0100 Subject: [PATCH 03/11] Add maildev as a dev dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 1550885..1681a4a 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "imagemin-svgo": "^8.0.0", "img-loader": "^3.0.1", "jest": "^26.1.0", + "maildev": "^1.1.0", "mini-css-extract-plugin": "^1.2.1", "node-sass": "^5.0.0", "nodemon": "^2.0.3", From 5eaebd5d120372a232b7338a05e9a6e17098828f Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Mon, 25 Jan 2021 13:17:41 +0100 Subject: [PATCH 04/11] Upgrade dependencies and bump swaf to ^0.23.0 --- .gitignore | 2 ++ package.json | 18 +++++++++--------- src/App.ts | 27 +++++++++++++-------------- src/controllers/HomeController.ts | 2 +- src/main.ts | 10 +++++----- tsconfig.frontend.json | 1 + tsconfig.json | 1 + 7 files changed, 32 insertions(+), 29 deletions(-) diff --git a/.gitignore b/.gitignore index 7626c60..570ee35 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ node_modules public dist yarn-error.log + +src/package.json diff --git a/package.json b/package.json index 1681a4a..2eefcc6 100644 --- a/package.json +++ b/package.json @@ -5,22 +5,22 @@ "repository": "https://eternae.ink/arisu/swaf-boilerplate", "author": "Alice Gaudon ", "private": true, - "main": "dist/src/main.js", + "main": "dist/main.js", "scripts": { - "dist-webpack": "webpack --mode production", + "test": "jest --verbose --runInBand", "clean": "(test ! -d dist || rm -r dist)", + "prepareSources": "cp package.json src/", "compile": "yarn clean && tsc", - "build": "yarn compile && yarn dist-webpack", - "lint": "eslint . --ext .js,.jsx,.ts,.tsx", - "dev": "concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"", - "start": "yarn build && node dist/src/main.js", - "test": "jest --verbose --runInBand" + "build": "yarn prepareSources && yarn compile && webpack --mode production", + "dev": "yarn prepareSources && concurrently -k -n \"Typescript,Node,Webpack,Maildev\" -p \"[{name}]\" -c \"blue,green,red,yellow\" \"tsc --watch\" \"nodemon\" \"webpack --watch --mode development\" \"maildev\"", + "start": "yarn build && node", + "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.5", "@fortawesome/fontawesome-free": "^5.14.0", - "@types/config": "^0.0.36", + "@types/config": "^0.0.38", "@types/express": "^4.17.6", "@types/express-session": "^1.17.0", "@types/feather-icons": "^4.7.0", @@ -61,6 +61,6 @@ "dependencies": { "config": "^3.3.1", "express": "^4.17.1", - "swaf": "^0.22.5" + "swaf": "^0.23.0" } } diff --git a/src/App.ts b/src/App.ts index f645a64..6272da0 100644 --- a/src/App.ts +++ b/src/App.ts @@ -10,15 +10,15 @@ import ServeStaticDirectoryComponent from "swaf/components/ServeStaticDirectoryC import MaintenanceComponent from "swaf/components/MaintenanceComponent"; import MailComponent from "swaf/components/MailComponent"; import SessionComponent from "swaf/components/SessionComponent"; -import RedirectBackComponent from "swaf/components/RedirectBackComponent"; import FormHelperComponent from "swaf/components/FormHelperComponent"; import CsrfProtectionComponent from "swaf/components/CsrfProtectionComponent"; import WebSocketServerComponent from "swaf/components/WebSocketServerComponent"; import HomeController from "./controllers/HomeController"; import AutoUpdateComponent from "swaf/components/AutoUpdateComponent"; -import packageJson = require('../package.json'); import DummyMigration from "swaf/migrations/DummyMigration"; import DropLegacyLogsTable from "swaf/migrations/DropLegacyLogsTable"; +import PreviousUrlComponent from "swaf/components/PreviousUrlComponent"; +import packageJson = require('./package.json'); export default class App extends Application { public constructor( @@ -43,41 +43,40 @@ export default class App extends Application { } private registerComponents() { - const redisComponent = new RedisComponent(); - const mysqlComponent = new MysqlComponent(); - - const expressAppComponent = new ExpressAppComponent(this.addr, this.port); - this.use(expressAppComponent); - this.use(new NunjucksComponent()); + // Base + this.use(new ExpressAppComponent(this.addr, this.port)); this.use(new LogRequestsComponent()); // Static files this.use(new ServeStaticDirectoryComponent('public')); this.use(new ServeStaticDirectoryComponent('node_modules/feather-icons/dist', '/icons')); + // Dynamic views and routes + this.use(new NunjucksComponent()); + this.use(new PreviousUrlComponent()); + // Maintenance this.use(new MaintenanceComponent(this, () => { - return redisComponent.canServe() && mysqlComponent.canServe(); + return this.as(RedisComponent).canServe() && this.as(MysqlComponent).canServe(); })); this.use(new AutoUpdateComponent()); // Services - this.use(mysqlComponent); + this.use(new MysqlComponent()); this.use(new MailComponent()); // Session - this.use(redisComponent); - this.use(new SessionComponent(redisComponent)); + this.use(new RedisComponent()); + this.use(new SessionComponent(this.as(RedisComponent))); // Utils - this.use(new RedirectBackComponent()); this.use(new FormHelperComponent()); // Middlewares this.use(new CsrfProtectionComponent()); // WebSocket server - this.use(new WebSocketServerComponent(this, expressAppComponent, redisComponent)); + this.use(new WebSocketServerComponent(this, this.as(ExpressAppComponent), this.as(RedisComponent))); } private registerWebSocketListeners() { diff --git a/src/controllers/HomeController.ts b/src/controllers/HomeController.ts index d8a0379..b5e1740 100644 --- a/src/controllers/HomeController.ts +++ b/src/controllers/HomeController.ts @@ -20,6 +20,6 @@ export default class HomeController extends Controller { * This is to test and assert that swaf extended types are available */ protected async goBack(req: Request, res: Response): Promise { - res.redirectBack(); + res.redirect(req.getPreviousUrl() || Controller.route('home')); } } diff --git a/src/main.ts b/src/main.ts index 0033726..babc7df 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,19 +2,19 @@ import {delimiter} from "path"; // Load config from specified path or default + swaf/config (default defaults) process.env['NODE_CONFIG_DIR'] = - __dirname + '/../../node_modules/swaf/config/' + __dirname + '/../node_modules/swaf/config/' + delimiter - + (process.env['NODE_CONFIG_DIR'] || __dirname + '/../../config/'); + + (process.env['NODE_CONFIG_DIR'] || __dirname + '/../config/'); -import {log} from "swaf/Logger"; +import {logger} from "swaf/Logger"; import App from "./App"; import config from "config"; (async () => { - log.debug('Config path:', process.env['NODE_CONFIG_DIR']); + logger.debug('Config path:', process.env['NODE_CONFIG_DIR']); const app = new App(config.get('listen_addr'), config.get('port')); await app.start(); })().catch(err => { - log.error(err); + logger.error(err); }); diff --git a/tsconfig.frontend.json b/tsconfig.frontend.json index 4b5a3f5..ad74720 100644 --- a/tsconfig.frontend.json +++ b/tsconfig.frontend.json @@ -2,6 +2,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "public/js", + "rootDir": "./assets", "target": "ES6", "strict": true, "lib": [ diff --git a/tsconfig.json b/tsconfig.json index 9034d02..12eec0a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "module": "CommonJS", "esModuleInterop": true, "outDir": "dist", + "rootDir": "./src", "target": "ES6", "strict": true, "lib": [ From 1043690a5d9d0f4fe5c760124dae9000fdd68750 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 11:37:08 +0100 Subject: [PATCH 05/11] Add bigger container max-width for desktop view --- assets/sass/_vars.scss | 1 + assets/sass/layout.scss | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss index 31b7580..1387331 100644 --- a/assets/sass/_vars.scss +++ b/assets/sass/_vars.scss @@ -29,3 +29,4 @@ $errorColor: desaturate($errorText, 50%); // Responsivity $mobileThreshold: 632px; +$desktopThreshold: 940px; diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 5a00bff..94508cc 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -650,16 +650,16 @@ button, .button { } @mixin container { - width: $mobileThreshold; - padding: 0 16px; + width: 100%; + padding: 0 8px; @media (min-width: $mobileThreshold) { margin: 0 auto; + padding: 0 16px; } - @media (max-width: $mobileThreshold) { - width: 100%; - padding: 0 8px; + @media (min-width: $desktopThreshold) { + width: $desktopThreshold; } } From d2a67a12ee8dac1ca7c54f2b8907655deb0b00cf Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 11:42:24 +0100 Subject: [PATCH 06/11] Fix subpanel leaking out of their container --- assets/sass/layout.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 94508cc..5ec9874 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -688,10 +688,14 @@ button, .button { } .sub-panel { - margin: 32px -18px; + margin: 32px 0; padding: 1px 16px; border: 2px solid lighten($panelBackground, 4%); border-radius: 5px; + + form > & { + margin: 32px -18px; + } } From 16394c0d4cfc69703e0a58adb6213443c5c14f32 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 11:43:13 +0100 Subject: [PATCH 07/11] Set icon size for titles --- assets/sass/layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 5ec9874..021028f 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -719,6 +719,10 @@ button, .button { stroke-linejoin: miter; fill: none; vertical-align: middle; + + h1 > &, h2 > &, h3 > & { + --icon-size: 24px; + } } // --- From e7165edafd09e1db353b207720185cf6f5df7cbf Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 11:43:42 +0100 Subject: [PATCH 08/11] Add hover color on warning buttons --- assets/sass/layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 021028f..a927d89 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -584,6 +584,10 @@ button, .button { &.warning { background-color: $warningColor; + + &:hover { + background-color: lighten($warningColor, 10%); + } } &.error, &.danger { From bda464ab1689be918219834782e2b8da0d1d8ca5 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 13:00:23 +0100 Subject: [PATCH 09/11] css: move a hover color and td.actions improvements to layout.scss --- assets/sass/layout.scss | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index a927d89..b8a5d32 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -338,7 +338,7 @@ a { text-decoration: none; &:hover { - color: lighten($secondary, 10%); + color: lighten($secondary, 30%); } .feather.feather-external-link { @@ -607,6 +607,35 @@ button, .button { } } + +// --- +// --- Tables +// --- +td.actions { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + form { + padding: 0; + display: inline; + } + + button, .button { + margin: 0; + padding: 8px; + + .feather { + margin-right: 0; + } + } + + > *:not(:first-child) { + margin-left: 8px; + } +} + .data-table { width: 100%; text-align: left; @@ -633,6 +662,10 @@ button, .button { } } + +// --- +// --- Breadcrumb widget +// --- .breadcrumb { list-style: none; display: flex; @@ -646,6 +679,7 @@ button, .button { } } + // --- // --- Layout helpers // --- From 8612b0f33a75ac034ca719d05397cd5e89ea33ff Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 13:00:38 +0100 Subject: [PATCH 10/11] css: move lighter theme to layout.scss and make header css mobile first --- assets/sass/_vars.scss | 7 +- assets/sass/layout.scss | 254 +++++++++++++++------------- assets/sass/responsivity_tools.scss | 19 +++ 3 files changed, 160 insertions(+), 120 deletions(-) create mode 100644 assets/sass/responsivity_tools.scss diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss index 1387331..478fca3 100644 --- a/assets/sass/_vars.scss +++ b/assets/sass/_vars.scss @@ -6,9 +6,10 @@ $secondaryForeground: $primaryForeground; $backgroundColor: darken($primary, 4%); $defaultTextColor: #ffffff; -$headerBackground: darken($primary, 7.5%); -$footerBackground: lighten($headerBackground, 1%); -$panelBackground: lighten($headerBackground, 1%); +$headerBackground: transparent; +$headerContainer: true; +$footerBackground: transparent; +$panelBackground: darken($backgroundColor, 3.2%); $inputBackground: darken($panelBackground, 4%); $info: #4499ff; diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index b8a5d32..d086fb7 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -1,5 +1,6 @@ @import "vars"; @import 'fonts'; +@import "responsivity_tools"; * { box-sizing: border-box; @@ -69,21 +70,31 @@ body { body > header { z-index: 50; display: flex; - flex-direction: row; + flex-direction: row-reverse; justify-content: space-between; + align-items: center; $headerHeight: 64px; height: $headerHeight; line-height: $headerHeight; - background-color: $headerBackground; + background: $headerBackground; + + @if $headerContainer { + @include container; + } + + @media (max-width: $mobileThreshold) { + padding: 0; + } .logo { display: flex; flex-direction: row; + align-items: center; - padding: 0 24px 0 16px; - font-size: 32px; + padding: 0 16px 0 8px; + font-size: 24px; color: $defaultTextColor; &:hover { @@ -91,34 +102,48 @@ body > header { } img { - width: $headerHeight; - height: $headerHeight; - margin-right: 16px; + width: initial; + height: calc(#{$headerHeight} - 16px); + margin-right: 8px; + flex-shrink: 0; } } nav { - ul { + > ul { + position: fixed; + z-index: -1; + top: 0; + left: 0; + height: 100%; + transform: translateX(-100%); + transition: transform ease-out 150ms; + display: flex; - flex-direction: row; + flex-direction: column; margin: 0; - padding: 0; + padding: $headerHeight 8px 8px; font-size: 20px; + background: $panelBackground; + li { position: relative; list-style: none; + margin-top: 8px; a, button { position: relative; - height: 64px; margin: 0; - padding: 0 24px; display: flex; flex-direction: row; align-items: center; + height: auto; + padding: 8px; + + border-radius: 3px; &:hover, &:active { &:not(button) { @@ -127,13 +152,19 @@ body > header { } .feather { - --icon-size: 24px; + --icon-size: 16px; + } + + .tip { + display: block; + margin-left: 8px; + text-transform: inherit; + font-weight: inherit; } } button { - margin: 8px; - padding: 24px; + margin: 0; height: 32px; .feather { @@ -158,114 +189,121 @@ body > header { } .dropdown { - position: absolute; - z-index: -1; - top: 100%; - right: 0; - - white-space: nowrap; - background: $headerBackground; - border-radius: 0 0 3px 3px; - - a { - padding: 0 8px; - } - } - - &:hover .dropdown { + position: initial; display: block; + padding-left: 0; } } + + > li:not(:first-child) { + border-top: 1px solid transparentize($defaultTextColor, 0.8); + padding-top: 8px; + } + + &.open { + transform: translateX(0%); + box-shadow: 0 0 5px darken($panelBackground, 20%); + } } #menu-button { - display: none; - } - } + position: fixed; + top: 0; + left: 0; + display: block; + margin: 0; + padding: 0 16px; + line-height: $headerHeight; - @media (max-width: $mobileThreshold) { - flex-direction: row-reverse; + cursor: pointer; + background: transparent; + border-radius: 0; - .logo { - padding: 0 16px 0 8px; - font-size: 24px; - - img { - margin-right: 8px; + .feather { + --icon-size: 28px; + margin: 0 8px; } } - nav { - #menu-button { - display: block; - margin: 0; - padding: 0 16px; - line-height: $headerHeight; - - cursor: pointer; - background: transparent; - border-radius: 0; - - .feather { - --icon-size: 28px; - margin: 0 8px; - } - } - - > ul { - flex-direction: column; - position: absolute; - z-index: 10; - left: 0; - transform: translateX(-100%); - transition: transform ease-out 150ms; - - background-color: $headerBackground; - - &.open { - transform: translateX(0%); - } - - li { - a, button { - .tip { - display: block; - margin-left: 8px; - text-transform: inherit; - font-weight: inherit; - } - } - - .dropdown { - position: initial; - display: block; - padding-left: 32px; - } - } - } + hr { + border: 0; + border-bottom: 1px solid $defaultTextColor; + opacity: 0.2; } } @media (min-width: $mobileThreshold) { - nav ul li { - a, button, .button { - @include tip; + flex-direction: row; + + nav { + #menu-button { + display: none; } - &:last-child { - a, button, .button { - .tip { - left: unset; - right: 4px; - transform: none; + ul { + position: static; + flex-direction: row; + transform: none; + padding: 0; + background: transparent; + + li { + margin-top: 0; + margin-left: 8px; + + a, button, .button { + @include tip; } + + &:last-child { + a, button, .button { + .tip { + left: unset; + right: 4px; + transform: none; + } + } + } + + .dropdown { + position: absolute; + z-index: -1; + top: 100%; + right: 0; + display: none; + padding: 8px; + + white-space: nowrap; + background: $panelBackground; + border-radius: 0 0 3px 3px; + + box-shadow: 0 2px 2px transparentize(darken($panelBackground, 20%), 0.75); + border-top: 4px solid lighten($panelBackground, 5%); + + li { + margin-left: 0; + + &:not(:first-child) { + margin-top: 8px; + } + } + } + + &:hover .dropdown { + display: block; + } + } + + > li:not(:first-child) { + border-top: 0; + padding-top: 0; } } } } } -footer { +body > footer { padding: 8px; margin-top: 8px; text-align: center; @@ -687,24 +725,6 @@ td.actions { text-align: center; } -@mixin container { - width: 100%; - padding: 0 8px; - - @media (min-width: $mobileThreshold) { - margin: 0 auto; - padding: 0 16px; - } - - @media (min-width: $desktopThreshold) { - width: $desktopThreshold; - } -} - -.container { - @include container; -} - .panel { position: relative; margin: 16px 0 48px; diff --git a/assets/sass/responsivity_tools.scss b/assets/sass/responsivity_tools.scss new file mode 100644 index 0000000..0e3d232 --- /dev/null +++ b/assets/sass/responsivity_tools.scss @@ -0,0 +1,19 @@ +@import "vars"; + +@mixin container { + width: 100%; + padding: 0 8px; + + @media (min-width: $mobileThreshold) { + margin: 0 auto; + padding: 0 16px; + } + + @media (min-width: $desktopThreshold) { + width: $desktopThreshold; + } +} + +.container { + @include container; +} From 145d8df70a945acc6d09b06d1b32dabbb1e02a70 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 26 Jan 2021 13:37:41 +0100 Subject: [PATCH 11/11] css: move menu .tip visibility to layout.scss --- assets/sass/layout.scss | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index d086fb7..9e14352 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -156,10 +156,22 @@ body > header { } .tip { + position: static; + visibility: visible; + opacity: 1; display: block; + height: auto; margin-left: 8px; - text-transform: inherit; + padding: 0 0 0 4px; + transform: none; + + font-size: 16px; + line-height: 16px; + + color: inherit; + text-transform: uppercase; font-weight: inherit; + background: transparent; } } @@ -251,10 +263,6 @@ body > header { margin-top: 0; margin-left: 8px; - a, button, .button { - @include tip; - } - &:last-child { a, button, .button { .tip {