Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2025-02-20 15:29:00 +00:00
Code Issues Projects Releases Wiki Activity

More work on interactivity.

Browse Source 
- Added vertical voltage switch markup in index with new container.
- Refactored existing tab change code to now change main display too.
- renamed existing map-display to tour-display inline with tab content.
This commit is contained in:
Max Stevenson 2020-06-14 18:27:28 +01:00
parent 8f049e5438
commit 0b964f0c7b
9 changed files with 291 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@ -19,33 +19,52 @@
<div id="grid-container">
<div
class="outer-edge__dark__no-right-edge"
id="map-display__outer"
id="tour-display__outer"
>
<div
class="inner-edge__light__no-padding"
id="map-display__inner"
class="inner-edge__light__no-padding main-display main-display__hidden"
id="power-display__inner"
>
<div class="map-display__container">
<div class="map-display__system-status__container">
<div class="map-display__system-wrapper">
<h1 id="sys-one" class="map-display__system-status">
<div class="toggle-switch-container">
<div class="toggle-switch switch-vertical">
<input
id="toggle-a"
type="radio"
name="switch"
checked="checked"
/>
<input id="toggle-b" type="radio" name="switch" />
<span class="toggle-outside">
<span class="toggle-inside"></span>
</span>
</div>
</div>
</div>
<div
class="inner-edge__light__no-padding main-display"
id="tour-display__inner"
>
<div class="tour-display__container">
<div class="tour-display__system-status__container">
<div class="tour-display__system-wrapper">
<h1 id="sys-one" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="map-display__center-section">
<div class="map-display__system-wrapper">
<h1 id="sys-two" class="map-display__system-status">
<div class="tour-display__center-section">
<div class="tour-display__system-wrapper">
<h1 id="sys-two" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="map-display__system-wrapper">
<h1 id="sys-three" class="map-display__system-status">
<div class="tour-display__system-wrapper">
<h1 id="sys-three" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
</div>
<div class="map-display__system-wrapper">
<h1 id="sys-four" class="map-display__system-status">
<div class="tour-display__system-wrapper">
<h1 id="sys-four" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
@ -159,23 +178,6 @@
<button id="power-close"></button>
<p class="power-button__text">Push to Close</p>
</div>
<div class="onoffswitch">
<input
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
tabindex="0"
checked
/>
<label
class="onoffswitch-label"
for="myonoffswitch"
>
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div
class="video-screen__tab-content video-screen__hidden"

13
public/scripts/app.js
View File

@ -55,14 +55,15 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
button.firstElementChild
.querySelector("p")
.classList.remove("button-text__engraved");
changeVideoScreenTab(event);
changeScreenContent(event);
});
}
////////////////////////
// Video screen tab change
const changeVideoScreenTab = event => {
const changeScreenContent = event => {
let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
const mainDisplayElements = document.getElementsByClassName("main-display");
const tabContentElements = document.getElementsByClassName(
"video-screen__tab-content"
);
@ -74,6 +75,14 @@ const changeVideoScreenTab = event => {
tabContentElements[i].style.display = "none";
}
}
for (let i = 0; i < mainDisplayElements.length; i++) {
if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
mainDisplayElements[i].style.display = "flex";
} else {
mainDisplayElements[i].style.display = "none";
}
}
};
////////////////////////

194
public/stylesheets/styles.css
View File

@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Roboto");
*,
*::before,
*::after {
@ -47,13 +48,13 @@ body {
grid-area: 1/2/4/3;
}
#map-display__outer {
#tour-display__outer {
grid-area: 1/1/4/2;
display: flex;
flex-direction: column;
}
#map-display__inner {
#tour-display__inner {
display: flex;
flex-direction: column;
flex: 1;
@ -163,7 +164,7 @@ body {
}
.button-text__engraved__light {
text-shadow: 3px 2px 1px #B0B4A9, 1px 1px 0.5px #666C57;
text-shadow: 3px 2px 1px #b0b4a9, 1px 1px 0.5px #666c57;
}
.button-text__embossed {
@ -176,7 +177,7 @@ body {
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 8px #4C4C4C;
box-shadow: inset 0 0 8px #4c4c4c;
padding: 5px;
cursor: default;
}
@ -191,14 +192,14 @@ body {
#power-charge {
border-radius: 50%;
background-color: #F6E100;
background-color: #f6e100;
width: 50px;
height: 50px;
}
#power-close {
border-radius: 50%;
background-color: #148E42;
background-color: #148e42;
width: 50px;
height: 50px;
}
@ -207,100 +208,137 @@ body {
color: white;
}
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
*,
*:before,
*:after {
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "HIGH";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
body {
background-color: #212121;
font-family: "Roboto", sans-serif;
}
.onoffswitch-inner:after {
content: "LOW";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
.toggle-switch-container {
align-content: center;
padding: 30px;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
.toggle-switch {
margin: 0;
}
.toggle-switch {
width: 10px;
position: relative;
}
.toggle-switch input {
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
.toggle-switch input:checked {
z-index: 1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
.toggle-switch input:checked + label {
opacity: 1;
cursor: default;
}
.map-display__system-wrapper {
.toggle-switch input:not(:checked) + label:hover {
opacity: 0.5;
}
.toggle-switch label {
color: #fff;
opacity: 0.33;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
}
.toggle-switch .toggle-outside {
height: 100%;
border-radius: 17px;
padding: 11px;
overflow: hidden;
transition: opacity 0.3s ease-in-out;
}
.toggle-switch .toggle-inside {
border-radius: 50%;
background: #424242;
position: absolute;
transition: all 0.3s ease-in-out;
}
.switch-vertical {
background-color: #00f;
width: 0px;
height: 60px;
margin-left: 27px;
}
.switch-vertical input {
height: 100%;
width: 60px;
right: 0;
margin: 0;
}
.switch-vertical label {
font-size: 15px;
line-height: 30px;
display: block;
width: 80px;
height: 50%;
margin: 0;
text-align: left;
padding-left: 12px;
}
.switch-vertical .toggle-outside {
background: rgba(255, 255, 255, 0.5);
position: absolute;
width: 23px;
height: 100%;
right: 0;
top: 0;
}
.switch-vertical .toggle-inside {
height: 17px;
left: 3px;
top: 3px;
width: 17px;
}
.switch-vertical input:checked ~ .toggle-outside .toggle-inside {
top: 3px;
}
.switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
top: 40px;
}
.tour-display__system-wrapper {
background-color: #448149;
display: flex;
justify-content: center;
flex-direction: column;
}
.map-display__center-section {
.tour-display__center-section {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.map-display__container {
.tour-display__container {
display: flex;
flex: 1;
justify-content: space-between;
@ -309,13 +347,13 @@ body {
background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
}
.map-display__system-status {
.tour-display__system-status {
background: #438149;
color: #ededed;
margin: 0;
}
.map-display__system-status__container {
.tour-display__system-status__container {
display: flex;
flex: 1;
justify-content: space-between;
@ -764,4 +802,8 @@ body {
transition: all 500ms linear 0s;
}
.main-display__hidden {
display: none;
}
/*# sourceMappingURL=styles.css.map */

2
public/stylesheets/styles.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EAAoB;EACpB;EAA0B;EAAuB;;;AAEnD;EACE;EACA;EACA;;;AAEF;EACE;EAAgB;EAAkB;EAClC;EAA2B;;;AAE7B;EACE;EAAgB;EAAa;EAC7B;;;AAEF;EACE;EAAgB;EAAa;EAAY;EAAc;EAAY;EACnE;EAAiB;EAAc;EAA2C;EAC1E;;;AAEF;EACE;EACA;EACA;EAA2B;;;AAE7B;EACE;EACA;EACA;EAA2B;EAC3B;;;AAEF;EACE;EAAgB;EAAa;EAC7B;EACA;EAAoB;EAAQ;EAC5B;EACA;EAA2B;EAC3B;;;AAEF;EACE;;;AAEF;EACE;;;ACxGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;;;ACrGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss"],"names":[],"mappings":"AA2DQ;AC3DR;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AK9KF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;;;ACrGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE","file":"styles.css"}

165
sass/components/_buttons.scss
View File

@ -13,7 +13,7 @@
.button-text__engraved__light {
@extend .button-text__engraved;
text-shadow: 3px 2px 1px #B0B4A9, 1px 1px 0.5px #666C57;
text-shadow: 3px 2px 1px #b0b4a9, 1px 1px 0.5px #666c57;
}
.button-text__embossed {
@ -26,7 +26,7 @@
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 8px #4C4C4C;
box-shadow: inset 0 0 8px #4c4c4c;
padding: 5px;
cursor: default;
}
@ -41,14 +41,14 @@
#power-charge {
border-radius: 50%;
background-color: #F6E100;
background-color: #f6e100;
width: 50px;
height: 50px;
}
#power-close {
border-radius: 50%;
background-color: #148E42;
background-color: #148e42;
width: 50px;
height: 50px;
}
@ -57,51 +57,120 @@
color: white;
}
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
@import url("https://fonts.googleapis.com/css?family=Roboto");
*,
*:before,
*:after {
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "HIGH";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "LOW";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
body {
background-color: #212121;
font-family: "Roboto", sans-serif;
}
.toggle-switch-container {
align-content: center;
padding: 30px;
}
.toggle-switch {
margin: 0;
}
.toggle-switch {
width: 10px;
position: relative;
}
.toggle-switch input {
position: absolute;
top: 0;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.toggle-switch input:checked {
z-index: 1;
}
.toggle-switch input:checked + label {
opacity: 1;
cursor: default;
}
.toggle-switch input:not(:checked) + label:hover {
opacity: 0.5;
}
.toggle-switch label {
color: #fff;
opacity: 0.33;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
}
.toggle-switch .toggle-outside {
height: 100%;
border-radius: 17px;
padding: 11px;
overflow: hidden;
transition: opacity 0.3s ease-in-out;
}
.toggle-switch .toggle-inside {
border-radius: 50%;
background: #424242;
position: absolute;
transition: all 0.3s ease-in-out;
}
.switch-vertical {
background-color: #00f;
width: 0px;
height: 60px;
margin-left: 27px;
}
.switch-vertical input {
height: 100%;
width: 60px;
right: 0;
margin: 0;
}
.switch-vertical label {
font-size: 15px;
line-height: 30px;
display: block;
width: 80px;
height: 50%;
margin: 0;
text-align: left;
padding-left: 12px;
}
.switch-vertical .toggle-outside {
background: rgba(255, 255, 255, 0.5);
position: absolute;
width: 23px;
height: 100%;
right: 0;
top: 0;
}
.switch-vertical .toggle-inside {
height: 17px;
left: 3px;
top: 3px;
width: 17px;
}
.switch-vertical input:checked ~ .toggle-outside .toggle-inside {
top: 3px;
}
.switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
top: 40px;
}

10
sass/components/_display-text.scss
View File

@ -1,17 +1,17 @@
.map-display__system-wrapper {
.tour-display__system-wrapper {
background-color: #448149;
display: flex;
justify-content: center;
flex-direction: column;
}
.map-display__center-section {
.tour-display__center-section {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.map-display__container {
.tour-display__container {
display: flex;
flex: 1;
justify-content: space-between;
@ -21,13 +21,13 @@
linear-gradient(to bottom, white 1px, transparent 1px);
}
.map-display__system-status {
.tour-display__system-status {
background: #438149;
color: #ededed;
margin: 0;
}
.map-display__system-status__container {
.tour-display__system-status__container {
display: flex;
flex: 1;
justify-content: space-between;

4
sass/components/_layout.scss
View File

@ -23,13 +23,13 @@
grid-area: 1 / 2 / 4 / 3;
}
#map-display__outer {
#tour-display__outer {
grid-area: 1 / 1 / 4 / 2;
display: flex;
flex-direction: column;
}
#map-display__inner {
#tour-display__inner {
display: flex;
flex-direction: column;
flex: 1;

3
sass/components/_main-display.scss Normal file
View File

@ -0,0 +1,3 @@
.main-display__hidden {
display: none;
}

1
sass/styles.scss
View File

@ -12,3 +12,4 @@
@import "./components/output-display";
@import "./components/system-icons";
@import "./components/modal";
@import "./components/main-display";