- scss framework bulma
This commit is contained in:
Arno Kaimbacher
parent
60a361fd6a
commit
885947ee31
6 changed files with 627 additions and 113 deletions
296
src/css/page_bulma.scss
Normal file
296
src/css/page_bulma.scss
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
@charset "utf-8";
|
||||
// @import "~bulma/bulma";
|
||||
|
||||
// $fa-font-path: "/webfonts"; // destination folder in dist
|
||||
//Adapt the path to be relative to your main.scss file
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
|
||||
// Import a Google Font
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
|
||||
|
||||
// Set your brand colors
|
||||
$purple: #8A4D76;
|
||||
$pink: #FA7C91;
|
||||
$brown: #757763;
|
||||
$beige-light: #D0D1CD;
|
||||
$beige-lighter: #EFF0EB;
|
||||
$mouse-grey: #6c6e6b;
|
||||
$select-green: #03a678;
|
||||
|
||||
// Update Bulma's global variables
|
||||
$family-sans-serif: "Nunito", sans-serif;
|
||||
$grey-dark: $brown;
|
||||
// $grey-light: $beige-light;
|
||||
// $primary: $purple;
|
||||
// $link: $mouse-grey;
|
||||
$widescreen-enabled: false;
|
||||
$fullhd-enabled: false;
|
||||
$tabs-link-active-border-bottom-color: $select-green;
|
||||
$tabs-link-active-color: $select-green;
|
||||
|
||||
|
||||
// Update some of Bulma's component variables
|
||||
// $body-background-color: $beige-lighter;
|
||||
$control-border-width: 2px;
|
||||
$input-border-color: transparent;
|
||||
// $input-shadow: none;
|
||||
|
||||
.main.columns:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* body {
|
||||
padding-top: 65px;
|
||||
} */
|
||||
|
||||
// section {
|
||||
// text-align: left;
|
||||
// padding: 60px 0 0 0;
|
||||
// }
|
||||
|
||||
.main {
|
||||
padding-top: 51px;
|
||||
// display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
/* height: 100%; */
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
/* flex: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#map-title {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.btnDownloadMeme {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#div-map {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#webgl {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mapDesktop {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
/* Old browsers */
|
||||
background: #cde6f9;
|
||||
background-image: -moz-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
|
||||
background: -webkit-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
|
||||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
background: linear-gradient(top, #cde6f9 0%, white 60%, #6b716f);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde6f9', endColorstr='#6b716f', GradientType=0);
|
||||
}
|
||||
|
||||
#inset {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
/*background-color:lightcyan;*/
|
||||
}
|
||||
|
||||
/* control positioning */
|
||||
.gba-control {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
pointer-events: auto;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.gba-top,
|
||||
.gba-bottom {
|
||||
position: absolute;
|
||||
// z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gba-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.gba-right {
|
||||
right: 0;
|
||||
/*right: 5px;*/
|
||||
}
|
||||
|
||||
.gba-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.gba-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gba-right .gba-control {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gba-top .gba-control:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.gba-bottom .gba-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gba-left .gba-control {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.gba-control-home span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=")
|
||||
/*img/home.png*/;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.red-label {
|
||||
color: #f00;
|
||||
padding: 2px;
|
||||
text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff,
|
||||
1px 1px #fff;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.green-label {
|
||||
color: #3ad29f;
|
||||
padding: 2px;
|
||||
text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff,
|
||||
1px 1px #fff;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.grey-label {
|
||||
color: #6b716f;
|
||||
padding: 2px;
|
||||
text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff,
|
||||
1px 1px #fff;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#div-tabs {
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tab-content .tab-pane {
|
||||
display: none;
|
||||
/* visibility: hidden; */
|
||||
}
|
||||
|
||||
.tab-content .tab-pane.active {
|
||||
display: block;
|
||||
/* visibility: visible; */
|
||||
}
|
||||
.tab-content {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
// Import only what you need from Bulma
|
||||
@import "../../node_modules/bulma/sass/utilities/_all.sass";
|
||||
@import "../../node_modules/bulma/sass/grid/_all.sass";
|
||||
@import "../../node_modules/bulma/sass/base/_all.sass";
|
||||
@import "../../node_modules/bulma/sass/elements/button.sass";
|
||||
@import "../../node_modules/bulma/sass/elements/container.sass";
|
||||
@import "../../node_modules/bulma/sass/elements/title.sass";
|
||||
@import "../../node_modules/bulma/sass/elements/icon.sass";
|
||||
@import "../../node_modules/bulma/sass/form/_all.sass";
|
||||
@import "../../node_modules/bulma/sass/components/navbar.sass";
|
||||
@import "../../node_modules/bulma/sass/components/tabs.sass";
|
||||
|
||||
@import "../../node_modules/bulma/sass/layout/hero.sass";
|
||||
@import "../../node_modules/bulma/sass/layout/section.sass";
|
||||
|
||||
html {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@ import { ShowModal } from './components/ShowModal';
|
|||
import { Selection } from './clip/Selection';
|
||||
import _ from "lodash";
|
||||
|
||||
import '../css/page.scss'; /* style loader will import it */
|
||||
import '../css/page_bulma.scss'; /* style loader will import it */
|
||||
|
||||
class Application {
|
||||
|
||||
|
|
@ -398,17 +398,36 @@ class Application {
|
|||
this.dialog.show();
|
||||
}, this);
|
||||
|
||||
domEvent.on(this.menuIcon, 'click', function (e) {
|
||||
e.preventDefault();
|
||||
this.navigation.classList.toggle("active");
|
||||
}, this);
|
||||
// domEvent.on(this.menuIcon, 'click', function (e) {
|
||||
// e.preventDefault();
|
||||
// this.navigation.classList.toggle("active");
|
||||
// }, this);
|
||||
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach( el => {
|
||||
el.addEventListener('click', () => {
|
||||
|
||||
// Get the target from the "data-target" attribute
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li span.button'));
|
||||
var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li'));
|
||||
|
||||
tabButtons.map(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
document.querySelector('li span.active.button').classList.remove('active');
|
||||
button.classList.add('active');
|
||||
document.querySelector('li.is-active').classList.remove('is-active');
|
||||
button.classList.add('is-active');
|
||||
|
||||
document.querySelector('.tab-pane.active').classList.remove('active');
|
||||
document.querySelector(button.getAttribute('name')).classList.add('active');
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue