Beginning to refactor stylesheets. Convert main menu to use buttons instead of a elements

This commit is contained in:
danielyxie 2018-09-25 12:18:06 -05:00
parent 81c1655a30
commit 597f080d97
9 changed files with 232 additions and 211 deletions

83
css/buttons.scss Normal file

@ -0,0 +1,83 @@
@import "mixins";
@import "theme";
/**
* Styling for all buttons
*
* Includes <button> elements as well as classes that are used
* for formatting buttons
*/
/* Remove default <button> styling */
button {
border: none;
}
.a-link-button,
.std-button {
text-decoration: none;
background-color: #555;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #333;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
&:hover {
background-color: #666;
}
&:active {
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
}
}
.a-link-button-inactive,
.std-button:disabled {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #333;
cursor: default;
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
&:active {
pointer-events: none;
}
}
.a-link-button-bought,
.std-button-bought {
text-decoration: none;
background-color: #0a0;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #0a0;
cursor: default;
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
&:active {
pointer-events: none;
}
}

118
css/mainmenu.scss Normal file

@ -0,0 +1,118 @@
@import "mixins";
@import "theme";
/**
* Styling for the main navigation menu on the left-hand-side
*/
.mainmenu {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
position: fixed;
height: 100%;
overflow: auto;
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background-color: #333;
}
/* Default buttons */
.mainmenu > li a,
.mainmenu > li button {
display: block;
color: #e6e6e6;
background-color: #555;
padding: 12px 8px;
text-decoration: none;
width: 100%;
text-align: left;
}
.mainmenu.classic > li a,
.mainmenu.classic > li button {
padding: 16px;
}
/* Hovering makes them lighter */
.mainmenu > li a:hover,
.mainmenu > li a:hover:not(.active),
.mainmenu > li a:focus {
background-color: #777;
color: #fff;
}
.mainmenu > li button:hover,
.mainmenu > li button:hover:not(.active) {
background-color: #777;
color: #fff;
}
/* Panel headers can become active, and they are "lighter" than the rest */
.mainmenu > li a.active,
.mainmenu > li button.active {
background-color: #777;
color: #fff;
}
.mainmenu > li a.active:hover,
.mainmenu > li button.active:hover {
background-color: #aaa;
}
#hacking-menu-header-li,
#character-menu-header-li,
#world-menu-header-li,
#help-menu-header-li {
position: relative;
}
/* Accordion Outline */
.mainmenu-accordion-header {
outline: 2px solid #fff !important;
}
.mainmenu-accordion-header-classic {
border: 2px solid #fff;
padding: 16px !important;
}
/* Plus and minus signs */
.mainmenu-accordion-header:after {
content: '\02795';
float: right;
font-size: $defaultFontSize * 0.8125;
position: absolute;
bottom: 25%;
right: 3px;
color: transparent;
text-shadow: 0 0 0 #fff;
}
.mainmenu-accordion-header-classic:after {
content: '\02795';
float: right;
font-size: $defaultFontSize * 0.8125;
color: #fff;
margin-left: 5px;
}
.mainmenu-accordion-header.opened,
.mainmenu-accordion-header-classic.opened {
background-color: #222;
&:after {
content: "\2796";
}
}
/* Slide down transition */
.mainmenu-accordion-panel {
max-height: 0;
opacity: 1;
transition: max-height 0.2s ease-out;
}

@ -22,16 +22,6 @@
border: 5px solid var(--my-highlight-color);
width: 70%;
max-height: 80%;
/*
margin: auto;
height:auto;
max-height:80%;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
*/
overflow-y: auto;
color: var(--my-font-color);
}

@ -40,16 +40,6 @@ span {
padding: 4px;
}
button[type="button"] {
@include transform(translateX(-50%));
padding: 0.5rem 1rem;
position: absolute;
z-index: 1;
bottom: 10px;
left: 50%;
}
#entire-game-container {
background-color: transparent;
}
@ -63,181 +53,12 @@ tr:focus {
outline: none;
}
/* Main navigation menu */
.mainmenu {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
position: fixed;
height: 100%;
overflow: auto;
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background-color: #333;
}
/* Default buttons */
.mainmenu > li a {
display: block;
color: #e6e6e6;
background-color: #555;
padding: 12px 8px;
text-decoration: none;
}
.mainmenu.classic > li a {
padding: 16px;
}
/* Hovering makes them lighter */
.mainmenu > li a:hover,
.mainmenu > li a:hover:not(.active),
.mainmenu > li a:focus {
background-color: #777;
color: #fff;
}
/* Panel headers can become active, and they are "lighter" than the rest */
.mainmenu > li a.active {
background-color: #777;
color: #fff;
}
.mainmenu > li a.active:hover {
background-color: #aaa;
}
#hacking-menu-header-li,
#character-menu-header-li,
#world-menu-header-li,
#help-menu-header-li {
position: relative;
}
/* Accordion Outline */
.mainmenu-accordion-header {
outline: 2px solid #fff;
}
.mainmenu-accordion-header-classic {
border: 2px solid #fff;
padding: 16px !important;
}
/* Plus and minus signs */
.mainmenu-accordion-header:after {
content: '\02795';
float: right;
font-size: $defaultFontSize * 0.8125;
position: absolute;
bottom: 25%;
right: 3px;
color: transparent;
text-shadow: 0 0 0 #fff;
}
.mainmenu-accordion-header-classic:after {
content: '\02795';
float: right;
font-size: $defaultFontSize * 0.8125;
color: #fff;
margin-left: 5px;
}
.mainmenu-accordion-header.opened,
.mainmenu-accordion-header-classic.opened {
background-color: #222;
&:after {
content: "\2796";
}
}
/* Slide down transition */
.mainmenu-accordion-panel {
max-height: 0;
opacity: 1;
transition: max-height 0.2s ease-out;
}
/* Make html links ("a" elements) nice looking buttons with this class */
a:link,
a:visited {
color: #fff;
}
.a-link-button {
text-decoration: none;
background-color: #555;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #333;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
&:hover {
background-color: #666;
}
&:active {
@include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6));
}
}
/* Make anchor tags ("a" elements) inactive (not clickable) */
.a-link-button-inactive {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #333;
cursor: default;
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
&:active {
pointer-events: none;
}
}
/* Make anchor tags ("a" elements) for activated actions */
.a-link-button-bought {
text-decoration: none;
background-color: #0a0;
color: #fff;
padding: 3px 5px;
margin: 5px;
border: 1px solid #0a0;
cursor: default;
&:hover {
.tooltiptext,
.tooltiptexthigh,
.tooltiptextleft {
visibility: visible;
}
}
&:active {
pointer-events: none;
}
}
.dropdown {
color: #fff;
background-color: #000;

5
package-lock.json generated

@ -7392,6 +7392,11 @@
"sort-keys": "1.1.2"
}
},
"normalize.css": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz",
"integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A=="
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

@ -27,6 +27,7 @@
"loader-runner": "^2.3.0",
"loader-utils": "^1.1.0",
"memory-fs": "~0.4.1",
"normalize.css": "^8.0.0",
"numeral": "2.0.6",
"sprintf-js": "^1.1.1",
"tapable": "^1.0.0",

@ -3533,7 +3533,7 @@ Corporation.prototype.updateUIHeaderTabs = function() {
content.appendChild(yesBtn);
container.appendChild(content);
document.getElementById("entire-game-container").appendChild(container);
container.style.display = "block";
container.style.display = "flex";
return false;
}
}));

@ -76,7 +76,10 @@ import {Page, routing} from "./ui/navigationTra
// These should really be imported with the module that is presenting that UI, but because they very much depend on the
// cascade order, we'll pull them all in here.
import 'normalize.css';
import "../css/styles.scss";
import "../css/buttons.scss";
import "../css/mainmenu.scss";
import "../css/terminal.scss";
import "../css/menupages.scss";
import "../css/workinprogress.scss";

@ -35,73 +35,73 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
<ul id="mainmenu" class="mainmenu">
<!-- Hacking dropdown -->
<li id="hacking-menu-header-li">
<a id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </a>
<button id="hacking-menu-header" class="mainmenu-accordion-header"> Hacking </button>
</li>
<li id="terminal-tab" class="mainmenu-accordion-panel">
<a id="terminal-menu-link"> Terminal </a>
<button id="terminal-menu-link"> Terminal </button>
</li>
<li id="create-script-tab" class="mainmenu-accordion-panel">
<a id="create-script-menu-link"> Create Script </a>
<button id="create-script-menu-link"> Create Script </button>
</li>
<li id="active-scripts-tab" class="mainmenu-accordion-panel">
<a id="active-scripts-menu-link"> Active Scripts </a>
<button id="active-scripts-menu-link"> Active Scripts </button>
</li>
<li id="create-program-tab" class="mainmenu-accordion-panel">
<a id="create-program-menu-link"> Create Program </a>
<button id="create-program-menu-link"> Create Program </button>
<span id="create-program-notification" class="notification-off"> </span>
</li>
<!-- Character dropdown -->
<li id="character-menu-header-li">
<a id="character-menu-header" class="mainmenu-accordion-header"> Character </a>
<button id="character-menu-header" class="mainmenu-accordion-header"> Character </button>
</li>
<li id="stats-tab" class="mainmenu-accordion-panel">
<a id="stats-menu-link"> Stats </a>
<button id="stats-menu-link"> Stats </button>
</li>
<li id="factions-tab" class="mainmenu-accordion-panel">
<a id="factions-menu-link"> Factions </a>
<button id="factions-menu-link"> Factions </button>
</li>
<li id="augmentations-tab" class="mainmenu-accordion-panel">
<a id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </a>
<button id="augmentations-menu-link" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> Augmentations </button>
</li>
<li id="hacknet-nodes-tab" class="mainmenu-accordion-panel">
<a id="hacknet-nodes-menu-link"> Hacknet Nodes </a>
<button id="hacknet-nodes-menu-link"> Hacknet Nodes </button>
</li>
<!-- World dropdown -->
<li id="world-menu-header-li">
<a id="world-menu-header" class="mainmenu-accordion-header">World</a>
<button id="world-menu-header" class="mainmenu-accordion-header">World</button>
</li>
<li id="city-tab" class="mainmenu-accordion-panel">
<a id="city-menu-link"> City </a>
<button id="city-menu-link"> City </button>
</li>
<li id="travel-tab" class="mainmenu-accordion-panel">
<a id="travel-menu-link">Travel</a>
<button id="travel-menu-link"> Travel </button>
</li>
<li id="job-tab" class="mainmenu-accordion-panel">
<a id="job-menu-link">Job</a>
<button id="job-menu-link"> Job </button>
</li>
<li id="bladeburner-tab" class="mainmenu-accordion-panel">
<a id="bladeburner-menu-link"> Bladeburner </a>
<button id="bladeburner-menu-link"> Bladeburner </button>
</li>
<li id="corporation-tab" class="mainmenu-accordion-panel">
<a id="corporation-menu-link"> Corp </a>
<button id="corporation-menu-link"> Corp </button>
</li>
<li id="gang-tab" class="mainmenu-accordion-panel">
<a id="gang-menu-link"> Gang </a>
<button id="gang-menu-link"> Gang </button>
</li>
<li id="help-menu-header-li">
<a id="help-menu-header" class="mainmenu-accordion-header">Help</a>
<button id="help-menu-header" class="mainmenu-accordion-header"> Help </button>
</li>
<li id="tutorial-tab" class="mainmenu-accordion-panel">
<a id="tutorial-menu-link"> Tutorial </a>
<button id="tutorial-menu-link"> Tutorial </button>
</li>
<li id="options-tab" class="mainmenu-accordion-panel">
<a id="options-menu-link"> Options </a>
<button id="options-menu-link"> Options </button>
</li>
<li id="dev-tab" class="mainmenu-accordion-panel">
<a id="dev-menu-link"> Dev </a>
<button id="dev-menu-link"> Dev </button>
</li>
</ul>
</div>