Move files to follow webpack structure
This commit is contained in:
141
src/styles/_common.scss
Normal file
141
src/styles/_common.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
/* Animations */
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
}
|
||||
@-ms-keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
}
|
||||
@-o-keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@mixin animate($anim) {
|
||||
-webkit-animation: $anim;
|
||||
-moz-animation: $anim;
|
||||
-ms-animation: $anim;
|
||||
-o-animation: $anim;
|
||||
animation: $anim;
|
||||
}
|
||||
|
||||
.flicker {
|
||||
@include animate(fadeIn 0.5s infinite alternate);
|
||||
}
|
||||
|
||||
@mixin rounded($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
-o-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin drop-shadow($opacity) {
|
||||
filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
|
||||
-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
|
||||
}
|
||||
|
||||
@mixin no-text-overflow() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes spotlogo {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
1.25% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
2.5% {
|
||||
transform: scale(1);
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
5% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Common objects */
|
||||
|
||||
*:focus {
|
||||
outline: 0px none transparent;
|
||||
}
|
||||
|
||||
[title]:not(a):not(.clickable) {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus {
|
||||
outline: 1px solid #CCC;
|
||||
}
|
||||
|
||||
body, textarea, input, button, a.button {
|
||||
font-size: 14px;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
@extend .clickable;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background: #eee;
|
||||
|
||||
&:hover {
|
||||
color: #eee;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, button, a.button {
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
/* Feedback */
|
||||
|
||||
.feedback {
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
&.error {
|
||||
color: red;
|
||||
}
|
||||
&.warning {
|
||||
color: orange;
|
||||
}
|
||||
&.success {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
130
src/styles/_fa.scss
Normal file
130
src/styles/_fa.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
$fa-font-path: "fa/fonts";
|
||||
$fa-css-prefix: fa;
|
||||
|
||||
@import 'fa/solid';
|
||||
@import 'fa/mixins';
|
||||
@import 'fa/core';
|
||||
@import 'fa/sizing';
|
||||
@import 'fa/fixed-width';
|
||||
@import 'fa/list';
|
||||
@import 'fa/bordered-pulled';
|
||||
@import 'fa/animated';
|
||||
@import 'fa/rotated-flipped';
|
||||
@import 'fa/stacked';
|
||||
|
||||
.fa {
|
||||
&.push {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&.push-left {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.control-icon {
|
||||
@extend .fa;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
text-decoration: none;
|
||||
color: #CCC;
|
||||
background: none;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.#{$fa-css-prefix}-menu:before { content: fa-content($fa-var-bars); }
|
||||
.#{$fa-css-prefix}-error:before { content: fa-content($fa-var-square-exclamation); }
|
||||
.#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); }
|
||||
.#{$fa-css-prefix}-success:before { content: fa-content($fa-var-check-circle); }
|
||||
.#{$fa-css-prefix}-new:before { content: fa-content($fa-var-plus); }
|
||||
.#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); }
|
||||
.#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); }
|
||||
.#{$fa-css-prefix}-cancel:before { content: fa-content($fa-var-image); }
|
||||
.#{$fa-css-prefix}-prev:before,
|
||||
.#{$fa-css-prefix}-back:before { content: fa-content($fa-var-chevron-left); }
|
||||
.#{$fa-css-prefix}-next:before { content: fa-content($fa-var-chevron-right); }
|
||||
.#{$fa-css-prefix}-close:before { content: fa-content($fa-var-times-circle); }
|
||||
|
||||
/* Map */
|
||||
.#{$fa-css-prefix}-map:before { content: fa-content($fa-var-map-marked); }
|
||||
.#{$fa-css-prefix}-track-off-track:before { content: fa-content($fa-var-hiking); }
|
||||
.#{$fa-css-prefix}-track-main:before { content: fa-content($fa-var-hiking); }
|
||||
.#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
|
||||
.#{$fa-css-prefix}-track-start:before { content: fa-content($fa-var-hiking);}
|
||||
.#{$fa-css-prefix}-track-end:before { content: fa-content($fa-var-hiking);}
|
||||
.#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
|
||||
.#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); }
|
||||
.#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }
|
||||
.#{$fa-css-prefix}-elev-drop:before { content: fa-content($fa-var-arrow-circle-down); }
|
||||
.#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); }
|
||||
.#{$fa-css-prefix}-download:before { content: fa-content($fa-var-file-download); }
|
||||
|
||||
/* Admin */
|
||||
.#{$fa-css-prefix}-newsletter:before { content: fa-content($fa-var-wifi); }
|
||||
.#{$fa-css-prefix}-project:before { content: fa-content($fa-var-hiking); }
|
||||
.#{$fa-css-prefix}-unsubscribe:before { content: fa-content($fa-var-times); }
|
||||
.#{$fa-css-prefix}-credits:before { content: fa-content($fa-var-paw); }
|
||||
.#{$fa-css-prefix}-admin:before { content: fa-content($fa-var-tools); }
|
||||
.#{$fa-css-prefix}-config:before { content: fa-content($fa-var-cogs); }
|
||||
.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
|
||||
|
||||
/* Feed */
|
||||
.#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
|
||||
.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-photo-video); }
|
||||
.#{$fa-css-prefix}-video:before { content: fa-content($fa-var-film); }
|
||||
.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); }
|
||||
.#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
|
||||
.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
|
||||
.#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
|
||||
.#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
|
||||
.#{$fa-css-prefix}-altitude:before { content: fa-content($fa-var-mountain); }
|
||||
.#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
|
||||
.#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
|
||||
.#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
|
||||
.#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
|
||||
.#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
|
||||
.#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); }
|
||||
.#{$fa-css-prefix}-link.copied:before { content: fa-content($fa-var-check); }
|
||||
|
||||
/* Feed - Poster */
|
||||
.#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }
|
||||
.#{$fa-css-prefix}-send:before { content: fa-content($fa-var-paper-plane); }
|
||||
|
||||
/* Lightbox */
|
||||
.#{$fa-css-prefix}-timezone:before { content: fa-content($fa-var-globe); }
|
||||
|
||||
/* Weather */
|
||||
.#{$fa-css-prefix}-temperature:before { content: fa-content($fa-var-thermometer-three-quarters); }
|
||||
.#{$fa-css-prefix}-clear-day:before { content: fa-content($fa-var-sun); }
|
||||
.#{$fa-css-prefix}-clear-night:before { content: fa-content($fa-var-moon-stars); }
|
||||
.#{$fa-css-prefix}-cloudy:before { content: fa-content($fa-var-clouds); }
|
||||
.#{$fa-css-prefix}-fog:before { content: fa-content($fa-var-fog); }
|
||||
.#{$fa-css-prefix}-hail:before { content: fa-content($fa-var-cloud-hail); }
|
||||
.#{$fa-css-prefix}-partly-cloudy-day:before { content: fa-content($fa-var-cloud-sun); }
|
||||
.#{$fa-css-prefix}-partly-cloudy-night:before { content: fa-content($fa-var-cloud-moon); }
|
||||
.#{$fa-css-prefix}-rain-snow-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
|
||||
.#{$fa-css-prefix}-rain-snow-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
|
||||
.#{$fa-css-prefix}-rain-snow:before { content: fa-content($fa-var-cloud-sleet); }
|
||||
.#{$fa-css-prefix}-rain:before { content: fa-content($fa-var-cloud-rain); }
|
||||
.#{$fa-css-prefix}-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
|
||||
.#{$fa-css-prefix}-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
|
||||
.#{$fa-css-prefix}-sleet:before { content: fa-content($fa-var-cloud-sleet); }
|
||||
.#{$fa-css-prefix}-snow-showers-day:before { content: fa-content($fa-var-cloud-snow); }
|
||||
.#{$fa-css-prefix}-snow-showers-night:before { content: fa-content($fa-var-cloud-snow); }
|
||||
.#{$fa-css-prefix}-snow:before { content: fa-content($fa-var-cloud-snow); }
|
||||
.#{$fa-css-prefix}-thunder-rain:before { content: fa-content($fa-var-thunderstorm); }
|
||||
.#{$fa-css-prefix}-thunder-showers-day:before { content: fa-content($fa-var-thunderstorm-sun); }
|
||||
.#{$fa-css-prefix}-thunder-showers-night:before { content: fa-content($fa-var-thunderstorm-moon); }
|
||||
.#{$fa-css-prefix}-thunder:before { content: fa-content($fa-var-thunderstorm); }
|
||||
.#{$fa-css-prefix}-wind:before { content: fa-content($fa-var-wind); }
|
||||
110
src/styles/_fonts.scss
Normal file
110
src/styles/_fonts.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
/* Google Fonts - Ubuntu v15 - https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext&display=swap */
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(fonts/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(fonts/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
114
src/styles/_leaflet.scss
Normal file
114
src/styles/_leaflet.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
$theme : "spot-theme";
|
||||
$base-color : #CCC;
|
||||
$highlight-color : #FFF;
|
||||
$background : rgba($base-color, 0.2);
|
||||
$drag-color : rgba($highlight-color, 0.2);
|
||||
$axis-color : darken($base-color,20%);
|
||||
$stroke-color : darken($base-color,40%);
|
||||
$stroke-width-mouse-focus : 1;
|
||||
$stroke-width-height-focus: 2;
|
||||
$stroke-width-axis : 2;
|
||||
|
||||
@import '../../node_modules/leaflet/dist/leaflet';
|
||||
@import 'leaflet/leaflet_heightgraph';
|
||||
|
||||
/* Leaflet fixes */
|
||||
.leaflet-container {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control.spot-control, .leaflet-control.heightgraph .heightgraph-toggle {
|
||||
@extend .clickable;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
|
||||
.fa {
|
||||
@extend .control-icon;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Leaflet Heightgraph fixes */
|
||||
|
||||
.legend-text, .tick, .tick text, .focusbox, .height-focus.circle, .height-focus.label, .lineSelection, .horizontalLineText {
|
||||
fill: #333 !important;
|
||||
}
|
||||
|
||||
.axis path, .focusbox rect, .focusLine line, .height-focus.label rect, .height-focus.line, .horizontalLine {
|
||||
stroke: #333 !important;
|
||||
}
|
||||
|
||||
.focusbox rect, .height-focus.label rect {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.focusLine line, .focusbox rect, .height-focus.label rect {
|
||||
-webkit-filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.6));
|
||||
filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.height-focus.label rect, .focusbox rect {
|
||||
fill: rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
.heightgraph.leaflet-control {
|
||||
svg.heightgraph-container {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
|
||||
.area {
|
||||
@include drop-shadow(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalLine {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.heightgraph-toggle {
|
||||
background: none;
|
||||
|
||||
.heightgraph-toggle-icon {
|
||||
@extend .control-icon;
|
||||
@extend .fa-elev-chart;
|
||||
height: 44px;
|
||||
position: static;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.heightgraph-close-icon {
|
||||
@extend .control-icon;
|
||||
@extend .fa-unsubscribe;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
|
||||
&:before {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-default-icon-path {
|
||||
background-image: none;
|
||||
}
|
||||
227
src/styles/_lightbox.scss
Normal file
227
src/styles/_lightbox.scss
Normal file
@@ -0,0 +1,227 @@
|
||||
@import '../../node_modules/lightbox2/dist/css/lightbox.css';
|
||||
|
||||
@mixin lightbox-icon($icon) {
|
||||
background: none;
|
||||
font-size: 2em;
|
||||
@extend .fa;
|
||||
@extend .#{$fa-css-prefix}-#{$icon};
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
|
||||
.lb-dataContainer {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
|
||||
.lb-data {
|
||||
flex-direction: row;
|
||||
|
||||
.lb-details {
|
||||
width: calc(100% - 1.25rem);
|
||||
|
||||
.lb-caption {
|
||||
.lb-caption-line {
|
||||
padding-right: 1em;
|
||||
line-height: 1.33333333333em; //icon height
|
||||
overflow: hidden;
|
||||
|
||||
&.comment {
|
||||
max-width: 50%;
|
||||
@include no-text-overflow();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lb-closeContainer {
|
||||
.lb-close {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
.lb-dataContainer {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
|
||||
.lb-data {
|
||||
flex-direction: column;
|
||||
|
||||
.lb-caption-line {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
line-height: 1.33333333em;
|
||||
|
||||
&.comment {
|
||||
.fa {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
display: inline-block;
|
||||
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
margin-top: calc(1em/1.33333333);
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Image */
|
||||
|
||||
.lb-outerContainer {
|
||||
margin: 0;
|
||||
border-radius:0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
.lb-container {
|
||||
overflow: hidden;
|
||||
|
||||
&.moveable {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.moving {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.lb-image {
|
||||
image-orientation: from-image;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
--translate-x: 0;
|
||||
--translate-y: 0;
|
||||
--scale: 1;
|
||||
|
||||
transform:
|
||||
translateX(var(--translate-x, 0))
|
||||
translateY(var(--translate-y, 0))
|
||||
scale(var(--scale, 1));
|
||||
}
|
||||
|
||||
.lb-video {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
&.lb-video-nav .lb-nav {
|
||||
top: 100px;
|
||||
height: calc(100% - 200px); //Leave space for video progress bar
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
|
||||
.lb-prev-area, .lb-next-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
&.lb-next-area {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover a.lb-prev, &:hover a.lb-next {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a.lb-prev, a.lb-next {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
-webkit-transition: opacity 0.4s;
|
||||
-moz-transition: opacity 0.4s;
|
||||
-o-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
a.lb-prev {
|
||||
@include lightbox-icon(prev);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
a.lb-next {
|
||||
@include lightbox-icon(next);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Titles */
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
.lb-data {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
display: flex;
|
||||
|
||||
.lb-details {
|
||||
float: none;
|
||||
|
||||
.lb-caption-line:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
@include lightbox-icon(close);
|
||||
@extend .fa-lg;
|
||||
@extend .fa-fw;
|
||||
height: auto;
|
||||
font-size: 1.3333333333em;
|
||||
line-height: 1em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
@include lightbox-icon(cancel);
|
||||
@extend .flicker;
|
||||
color: #CCC;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
37
src/styles/_mask_admin.scss
Normal file
37
src/styles/_mask_admin.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
#admin {
|
||||
margin: 1em;
|
||||
|
||||
table {
|
||||
margin-bottom: 1em;
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
th {
|
||||
background: #AAA;
|
||||
color: white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
td {
|
||||
background: #EEE;
|
||||
text-align: center;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
||||
input {
|
||||
&[type="number"] {
|
||||
width: 50px;
|
||||
}
|
||||
&[name="ref_feed_id"] {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: #AAA;
|
||||
background: none;
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
842
src/styles/_mask_project.scss
Normal file
842
src/styles/_mask_project.scss
Normal file
@@ -0,0 +1,842 @@
|
||||
//Feed width
|
||||
$elem-spacing: 0.5rem;
|
||||
$block-spacing: 1rem;
|
||||
$block-radius: 3px;
|
||||
$block-shadow: 3px;
|
||||
$panel-width: 30vw;
|
||||
$panel-width-max: "400px + 3 * #{$block-spacing}";
|
||||
$button-width: 44px;
|
||||
|
||||
//Feed colors
|
||||
$post-input-bg: #ffffff; //#d9deff;
|
||||
$post-color: #333; //#323268;
|
||||
$post-color-hover: darken($post-color, 10%);
|
||||
$post-bg: rgba(255,255,255,.8); //#B4BDFF;
|
||||
$message-color: #326526;
|
||||
$message-color-hover: darken($message-color, 10%);
|
||||
$message-bg: #6DFF58;
|
||||
$media-color: #333; //#635C28;
|
||||
$media-bg: rgba(255,255,255,.8); //#F3EC9F;
|
||||
|
||||
//Settings colors
|
||||
$title-color: $post-color;
|
||||
$subtitle-color: #999;
|
||||
|
||||
//Legend colors
|
||||
$track-main-color: #00ff78;
|
||||
$track-off-track-color: #0000ff;
|
||||
$track-hitchhiking-color: #FF7814;
|
||||
$legend-color: $post-color;
|
||||
|
||||
#projects {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Panels movements */
|
||||
&.with-feed {
|
||||
#submap {
|
||||
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
||||
}
|
||||
|
||||
#feed {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.leaflet-right {
|
||||
right: min(#{$panel-width}, #{$panel-width-max});
|
||||
}
|
||||
|
||||
#feed-button {
|
||||
.fa {
|
||||
@extend .fa-next;
|
||||
}
|
||||
}
|
||||
|
||||
#title {
|
||||
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.with-settings {
|
||||
#submap {
|
||||
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
||||
left: min(#{$panel-width}, #{$panel-width-max});
|
||||
}
|
||||
|
||||
#settings {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.leaflet-left {
|
||||
left: min(#{$panel-width}, #{$panel-width-max});
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
.fa {
|
||||
@extend .fa-prev;
|
||||
}
|
||||
}
|
||||
|
||||
#title {
|
||||
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.with-feed.with-settings {
|
||||
#submap {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#title {
|
||||
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
#background {
|
||||
background: #666;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#submap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transition: width 0.5s, left 0.5s;
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
font-size: 3em;
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 1.25em/2);
|
||||
color: #CCC;
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
/* Leaflet Popup */
|
||||
.leaflet-popup-content {
|
||||
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 1px solid #CCC;
|
||||
margin: $elem-spacing 0 $block-spacing 0;
|
||||
}
|
||||
|
||||
/* Marker Popup */
|
||||
.info-window {
|
||||
h1 .message-type {
|
||||
color: #CCC;
|
||||
font-weight: normal;
|
||||
font-size: calc(1em / 1.4);
|
||||
margin-left: 0.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.0em;
|
||||
margin: $elem-spacing 0 0 0;
|
||||
|
||||
a {
|
||||
color: $post-color;
|
||||
}
|
||||
}
|
||||
|
||||
.medias {
|
||||
line-height: 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
||||
margin: $block-spacing $block-spacing 0 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.drill {
|
||||
font-size: 2em;
|
||||
|
||||
.fa-drill-image {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa-drill-video, .fa-drill-image {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 200px;
|
||||
max-height: 100px;
|
||||
border-radius: $block-radius;
|
||||
image-orientation: from-image;
|
||||
transition: All 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Track Popup */
|
||||
.track_tooltip {
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
&.description {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .description {
|
||||
@include no-text-overflow();
|
||||
}
|
||||
.body {
|
||||
padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
|
||||
|
||||
.details {
|
||||
margin-top: -$block-spacing;
|
||||
|
||||
p.detail {
|
||||
margin-top: $block-spacing;
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Leaflet patches */
|
||||
.leaflet-control {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
font-family: Roboto, Arial, sans-serif;
|
||||
border-radius: $block-radius;
|
||||
border: none;
|
||||
margin: $block-spacing;
|
||||
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
|
||||
|
||||
&+ .leaflet-control:not(.leaflet-control-inline) {
|
||||
margin-top: 0;
|
||||
}
|
||||
&+ .leaflet-control.leaflet-control-inline {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.leaflet-control-scale {
|
||||
padding: 0.5em;
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.leaflet-control-inline {
|
||||
clear: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull right/left controls by $panel-width */
|
||||
.leaflet-right, .leaflet-left {
|
||||
transition: left 0.5s, right 0.5s;
|
||||
}
|
||||
|
||||
/* Hide default layer control */
|
||||
.leaflet-top.leaflet-left .leaflet-control-layers .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#legend {
|
||||
.track {
|
||||
white-space: nowrap;
|
||||
.line {
|
||||
width: 2em;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.main {
|
||||
background-color: $track-main-color;
|
||||
}
|
||||
&.off-track {
|
||||
background-color: $track-off-track-color;
|
||||
}
|
||||
&.hitchhiking {
|
||||
background-color: $track-hitchhiking-color;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 1em;
|
||||
margin-left: 0.5em;
|
||||
color: $legend-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#title {
|
||||
@include no-text-overflow();
|
||||
line-height: $button-width;
|
||||
height: $button-width;
|
||||
padding: 0 $block-spacing;
|
||||
margin-bottom: 0;
|
||||
|
||||
span#project_name {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
#feed-button .fa {
|
||||
@extend .fa-post;
|
||||
}
|
||||
#settings-button .fa {
|
||||
@extend .fa-menu;
|
||||
}
|
||||
|
||||
/* Drill & Map icons */
|
||||
|
||||
a.drill {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
||||
.drill-icon {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
i {
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa-stack {
|
||||
.fa-message {
|
||||
font-size: 32px;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
|
||||
color: $message-bg;
|
||||
}
|
||||
.fa-message-in {
|
||||
font-size: 13px;
|
||||
color: $message-color;
|
||||
top: 1px;
|
||||
}
|
||||
.fa-track-start, .fa-track-end {
|
||||
color: $message-color;
|
||||
font-size: 14px;
|
||||
top: 1px;
|
||||
}
|
||||
.fa-track-end {
|
||||
color: $track-hitchhiking-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Feed/Settings Panel */
|
||||
|
||||
#feed, #settings {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
&.moving {
|
||||
cursor: grabbing;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: $post-input-bg;
|
||||
color: $post-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
background-color: $post-color;
|
||||
color: $post-bg;
|
||||
|
||||
&:hover, &:hover a, &:hover a:visited {
|
||||
background-color: $post-input-bg;
|
||||
color: $post-color;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
background-color: $post-color;
|
||||
color: $post-bg;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&+ button, &+ a.button {
|
||||
margin-left: $elem-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
#feed-panel, #settings-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
#feed {
|
||||
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
|
||||
transition: right 0.5s;
|
||||
width: #{$panel-width};
|
||||
max-width: calc(#{$panel-width-max});
|
||||
|
||||
#feed-panel {
|
||||
width: 100%;
|
||||
padding-top: $block-spacing;
|
||||
|
||||
#posts_list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#poster {
|
||||
&.histo-mode .poster, &:not(.histo-mode) .archived {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.poster {
|
||||
textarea#post {
|
||||
margin-bottom: 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
input#name {
|
||||
width: calc(100% - 6em);
|
||||
}
|
||||
|
||||
button#submit {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.archived {
|
||||
background: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
.body-box {
|
||||
position:relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-item {
|
||||
margin-bottom: $block-spacing;
|
||||
background: $post-bg;
|
||||
color: $post-color;
|
||||
border-radius: $block-radius;
|
||||
width: calc(100% - #{$block-spacing});
|
||||
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
a {
|
||||
color: $post-color;
|
||||
&:hover {
|
||||
color: $post-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 0;
|
||||
}
|
||||
.signature {
|
||||
margin: $elem-spacing 0 0 0;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
margin: 0 0.2em calc((1em - 24px)/2) 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
padding: 0 $block-spacing;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
padding: $elem-spacing 0px;
|
||||
|
||||
&.index {
|
||||
width: 25%;
|
||||
|
||||
.link, .link:visited, .link_copied {
|
||||
margin-left: $elem-spacing;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.time {
|
||||
width: 75%;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body {
|
||||
clear: both;
|
||||
padding: 0em $block-spacing $block-spacing;
|
||||
}
|
||||
|
||||
&.headerless {
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
.body {
|
||||
padding-top: $block-spacing;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
margin: $elem-spacing 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.message {
|
||||
background: $message-bg;
|
||||
color: $message-color;
|
||||
|
||||
p {
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 $elem-spacing 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $message-color;
|
||||
&:hover {
|
||||
color: $message-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
a.drill {
|
||||
line-height: 0;
|
||||
|
||||
.drill-icon {
|
||||
transform: translate(-16px, -32px);
|
||||
|
||||
.fa-message-in {
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa-message {
|
||||
@extend .#{$fa-css-prefix}-drill-message;
|
||||
top: 13px;
|
||||
left: 3px;
|
||||
}
|
||||
.fa-message-in {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weather {
|
||||
position: absolute;
|
||||
top: $block-spacing;
|
||||
right: $block-spacing;
|
||||
|
||||
.fa {
|
||||
font-size: 1.3em;
|
||||
vertical-align: middle;
|
||||
line-height: 1rem;
|
||||
background: $message-color;
|
||||
color: $message-bg;
|
||||
border-radius: $block-radius 0 0 $block-radius;
|
||||
padding: $elem-spacing;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
padding: $elem-spacing;
|
||||
background: $message-bg;
|
||||
color: $message-color;
|
||||
border-radius: 0 $block-radius $block-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
.staticmap {
|
||||
width: 100%;
|
||||
border-radius: $block-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.post {
|
||||
.body {
|
||||
padding: 0em 1em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.media {
|
||||
background: $media-bg;
|
||||
color: $media-color;
|
||||
|
||||
.body {
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $media-color;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
|
||||
&.drill {
|
||||
&:hover {
|
||||
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
|
||||
color: rgba($media-bg, 0.75);
|
||||
}
|
||||
.comment {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drill-icon {
|
||||
font-size: 3em;
|
||||
|
||||
.fa-drill-image {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
image-orientation: from-image;
|
||||
outline: none;
|
||||
border-radius: $block-radius;
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
text-align: justify;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 0 0 $block-radius $block-radius;
|
||||
transition: opacity 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#settings {
|
||||
left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
|
||||
transition: left 0.5s;
|
||||
width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
|
||||
max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
|
||||
|
||||
#settings-panel {
|
||||
width: calc(100% - #{$block-spacing} - #{$block-shadow}); //Remove box-shadow
|
||||
margin: $block-spacing;
|
||||
border-radius: $block-radius;
|
||||
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
|
||||
color: $post-color;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.settings-header {
|
||||
text-align: center;
|
||||
flex: 0 1 auto;
|
||||
|
||||
.logo {
|
||||
background: rgba(255, 255, 255, .4);
|
||||
padding: 2rem 1rem;
|
||||
border-radius: $block-radius $block-radius 0 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 180px;
|
||||
transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
|
||||
}
|
||||
}
|
||||
|
||||
#last_update {
|
||||
position: absolute;
|
||||
margin-top: -2em;
|
||||
padding: 0 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
margin: 0;
|
||||
color: $subtitle-color;
|
||||
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
|
||||
|
||||
span {
|
||||
margin-right: 0.5em;
|
||||
img {
|
||||
width: 12px;
|
||||
vertical-align: middle;
|
||||
animation: spotlogo 20s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-footer {
|
||||
flex: 0 1 auto;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
border-radius: 0 0 3px 3px;
|
||||
font-size: 0.7em;
|
||||
padding: 0.3rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
|
||||
a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-sections {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
#settings-sections-scrollbox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
display: inline-block;
|
||||
margin: 1.5rem 1rem 0 1rem;
|
||||
width: calc(100% - 2 * #{$block-spacing});
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 $block-spacing;
|
||||
color: $title-color;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: .3em;
|
||||
display: block;
|
||||
@extend .clickable;
|
||||
|
||||
& > div {
|
||||
@include no-text-overflow();
|
||||
}
|
||||
}
|
||||
|
||||
&.newsletter {
|
||||
input#email {
|
||||
width: calc(100% - 6em);
|
||||
|
||||
&:disabled {
|
||||
color: #999;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
button#nl_btn {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&.subscribe .fa {
|
||||
@extend .fa-send;
|
||||
}
|
||||
&.unsubscribe .fa {
|
||||
@extend .fa-unsubscribe;
|
||||
}
|
||||
&.loading {
|
||||
background-color: $message-color;
|
||||
color: white;
|
||||
span {
|
||||
@extend .flicker;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#settings-projects {
|
||||
a.fa-download {
|
||||
color: $legend-color;
|
||||
|
||||
&:hover {
|
||||
color: #0078A8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#elems {
|
||||
display: none;
|
||||
}
|
||||
36
src/styles/_mask_upload.scss
Normal file
36
src/styles/_mask_upload.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
#upload {
|
||||
padding: 1em;
|
||||
|
||||
.bar {
|
||||
height: 18px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: 1em;
|
||||
|
||||
.thumb {
|
||||
width: 30%;
|
||||
max-width: 100px;
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
width: calc(70% - 1em);
|
||||
min-width: calc(100% - 100px - 1em);
|
||||
margin-left: 1em;
|
||||
vertical-align: top;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.save {
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
src/styles/_mobile.scss
Normal file
91
src/styles/_mobile.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
|
||||
|
||||
.desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#projects {
|
||||
#feed, #settings {
|
||||
width: calc(#{$panel-width});
|
||||
max-width: calc(#{$panel-width});
|
||||
}
|
||||
|
||||
#feed {
|
||||
right: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
|
||||
#settings {
|
||||
left: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
|
||||
#title {
|
||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaflet-right, .leaflet-left {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.with-feed, &.with-settings {
|
||||
#submap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-top.leaflet-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title {
|
||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
}
|
||||
}
|
||||
|
||||
&.with-feed {
|
||||
.leaflet-right {
|
||||
right: calc(#{$panel-width});
|
||||
}
|
||||
.leaflet-left {
|
||||
left: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
&.with-settings {
|
||||
.leaflet-right {
|
||||
right: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
.leaflet-left {
|
||||
left: calc(#{$panel-width});
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-top.leaflet-left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox .lb-outerContainer .lb-container .lb-nav {
|
||||
a.lb-prev, a.lb-next {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.lb-prev::before {
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
a.lb-next::before {
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 801px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
211
src/styles/_simplebar.scss
Normal file
211
src/styles/_simplebar.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
[data-simplebar] {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.simplebar-wrapper {
|
||||
overflow: hidden;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.simplebar-mask {
|
||||
direction: inherit;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
direction: inherit !important;
|
||||
box-sizing: inherit !important;
|
||||
resize: none !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper {
|
||||
direction: inherit;
|
||||
box-sizing: border-box !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
||||
width: auto;
|
||||
max-width: 100%; /* Not required for horizontal scroll to trigger */
|
||||
max-height: 100%; /* Needed for vertical scroll to trigger */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper::-webkit-scrollbar,
|
||||
.simplebar-hide-scrollbar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.simplebar-content:before,
|
||||
.simplebar-content:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.simplebar-placeholder {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer-wrapper {
|
||||
box-sizing: inherit !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1px;
|
||||
position: relative;
|
||||
float: left;
|
||||
max-height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
flex-grow: inherit;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer {
|
||||
box-sizing: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1000%;
|
||||
width: 1000%;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.simplebar-track {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-content {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-track {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: black;
|
||||
border-radius: 7px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar.simplebar-visible:before {
|
||||
/* When hovered, remove all transitions from drag handle */
|
||||
opacity: 0.5;
|
||||
transition: opacity 0s linear;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical {
|
||||
top: 0;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal {
|
||||
left: 0;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
|
||||
height: 100%;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
||||
right: auto;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
height: 7px;
|
||||
min-height: 0;
|
||||
min-width: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Rtl support */
|
||||
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hs-dummy-scrollbar-size {
|
||||
direction: rtl;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.simplebar-hide-scrollbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
153
src/styles/fa/_animated.scss
Normal file
153
src/styles/fa/_animated.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
// animating icons
|
||||
// --------------------------
|
||||
|
||||
.#{$fa-css-prefix}-beat {
|
||||
animation-name: #{$fa-css-prefix}-beat;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-bounce {
|
||||
animation-name: #{$fa-css-prefix}-bounce;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-fade {
|
||||
animation-name: #{$fa-css-prefix}-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-beat-fade {
|
||||
animation-name: #{$fa-css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip {
|
||||
animation-name: #{$fa-css-prefix}-flip;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-shake {
|
||||
animation-name: #{$fa-css-prefix}-shake;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin-reverse {
|
||||
--#{$fa-css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
|
||||
}
|
||||
|
||||
// if agent or operating system prefers reduced motion, disable animations
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.#{$fa-css-prefix}-beat,
|
||||
.#{$fa-css-prefix}-bounce,
|
||||
.#{$fa-css-prefix}-fade,
|
||||
.#{$fa-css-prefix}-beat-fade,
|
||||
.#{$fa-css-prefix}-flip,
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-shake,
|
||||
.#{$fa-css-prefix}-spin,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat {
|
||||
0%, 90% { transform: scale(1); }
|
||||
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-bounce {
|
||||
0% { transform: scale(1,1) translateY(0); }
|
||||
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
|
||||
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
|
||||
64% { transform: scale(1,1) translateY(0); }
|
||||
100% { transform: scale(1,1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-fade {
|
||||
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-flip {
|
||||
50% {
|
||||
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-shake {
|
||||
0% { transform: rotate(-15deg); }
|
||||
4% { transform: rotate(15deg); }
|
||||
8%, 24% { transform: rotate(-18deg); }
|
||||
12%, 28% { transform: rotate(18deg); }
|
||||
16% { transform: rotate(-22deg); }
|
||||
20% { transform: rotate(22deg); }
|
||||
32% { transform: rotate(-12deg); }
|
||||
36% { transform: rotate(12deg); }
|
||||
40%, 100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
20
src/styles/fa/_bordered-pulled.scss
Normal file
20
src/styles/fa/_bordered-pulled.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
// bordered + pulled icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-border {
|
||||
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
|
||||
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
|
||||
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
|
||||
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
|
||||
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
66
src/styles/fa/_core.scss
Normal file
66
src/styles/fa/_core.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix} {
|
||||
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
|
||||
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix},
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-sharp,
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light,
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin,
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-duotone,
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-sharp-solid,
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light,
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
}
|
||||
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-classic.#{$fa-css-prefix}-duotone,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-sharp {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
%fa-icon {
|
||||
@include fa-icon;
|
||||
}
|
||||
10
src/styles/fa/_duotone-icons.scss
Normal file
10
src/styles/fa/_duotone-icons.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// specific duotone icon class definition
|
||||
// -------------------------
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */
|
||||
|
||||
@each $name, $icon in $fa-icons {
|
||||
.fad.#{$fa-css-prefix}-#{$name}::after, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
|
||||
content: unquote("\"#{ $icon }#{ $icon }\"");
|
||||
}
|
||||
}
|
||||
7
src/styles/fa/_fixed-width.scss
Normal file
7
src/styles/fa/_fixed-width.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
// fixed-width icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-fw {
|
||||
text-align: center;
|
||||
width: $fa-fw-width;
|
||||
}
|
||||
57
src/styles/fa/_functions.scss
Normal file
57
src/styles/fa/_functions.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
// functions
|
||||
// --------------------------
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($fa-var) {
|
||||
@return unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
|
||||
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
|
||||
//
|
||||
// Licensed under: The MIT License (MIT)
|
||||
//
|
||||
// Copyright (c) 2011-2021 Twitter, Inc.
|
||||
// Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
|
||||
@function fa-divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
$quotient: 0;
|
||||
$remainder: $dividend;
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
@if $divisor == 1 {
|
||||
@return $dividend;
|
||||
}
|
||||
@while $remainder >= $divisor {
|
||||
$quotient: $quotient + 1;
|
||||
$remainder: $remainder - $divisor;
|
||||
}
|
||||
@if $remainder > 0 and $precision > 0 {
|
||||
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
|
||||
}
|
||||
@return ($quotient + $remainder) * $sign;
|
||||
}
|
||||
9
src/styles/fa/_icons.scss
Normal file
9
src/styles/fa/_icons.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
// specific icon class definition
|
||||
// -------------------------
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
|
||||
@each $name, $icon in $fa-icons {
|
||||
.#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
|
||||
}
|
||||
18
src/styles/fa/_list.scss
Normal file
18
src/styles/fa/_list.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
|
||||
padding-left: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-li {
|
||||
left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
121
src/styles/fa/_mixins.scss
Normal file
121
src/styles/fa/_mixins.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
// mixins
|
||||
// --------------------------
|
||||
|
||||
// base rendering for an icon
|
||||
@mixin fa-icon {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// sets relative font-sizing and alignment (in _sizing)
|
||||
@mixin fa-size ($font-size) {
|
||||
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
|
||||
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
||||
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
||||
}
|
||||
|
||||
// only display content to screen readers
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
@mixin fa-sr-only() {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
@mixin fa-sr-only-focusable() {
|
||||
&:not(:focus) {
|
||||
@include fa-sr-only();
|
||||
}
|
||||
}
|
||||
|
||||
// sets a specific icon family to use alongside style + icon mixins
|
||||
@mixin fa-family-classic() {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
}
|
||||
|
||||
@mixin fa-family-sharp() {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties, and both the ::before
|
||||
// and ::after elements in the duotone case.
|
||||
@mixin fa-icon-solid($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-solid;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-regular($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-regular;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-light($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-light;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-thin($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-thin;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-duotone($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-duotone;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
&::after {
|
||||
content: unquote("\"#{ $fa-var }#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-solid($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-solid;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-brands($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-brands;
|
||||
|
||||
&::before {
|
||||
content: unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
31
src/styles/fa/_rotated-flipped.scss
Normal file
31
src/styles/fa/_rotated-flipped.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-both,
|
||||
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
|
||||
}
|
||||
14
src/styles/fa/_screen-reader.scss
Normal file
14
src/styles/fa/_screen-reader.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
// screen-reader utilities
|
||||
// -------------------------
|
||||
|
||||
// only display content to screen readers
|
||||
.sr-only,
|
||||
.#{$fa-css-prefix}-sr-only {
|
||||
@include fa-sr-only;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
.sr-only-focusable,
|
||||
.#{$fa-css-prefix}-sr-only-focusable {
|
||||
@include fa-sr-only-focusable;
|
||||
}
|
||||
2042
src/styles/fa/_shims.scss
Normal file
2042
src/styles/fa/_shims.scss
Normal file
File diff suppressed because it is too large
Load Diff
16
src/styles/fa/_sizing.scss
Normal file
16
src/styles/fa/_sizing.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{$fa-css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in $fa-sizes {
|
||||
.#{$fa-css-prefix}-#{$size} {
|
||||
@include fa-size($value);
|
||||
}
|
||||
}
|
||||
32
src/styles/fa/_stacked.scss
Normal file
32
src/styles/fa/_stacked.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: $fa-stack-vertical-align;
|
||||
width: $fa-stack-width;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
|
||||
}
|
||||
9327
src/styles/fa/_variables.scss
Normal file
9327
src/styles/fa/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
30
src/styles/fa/brands.scss
Normal file
30
src/styles/fa/brands.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
|
||||
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@each $name, $icon in $fa-brand-icons {
|
||||
.#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
|
||||
}
|
||||
65
src/styles/fa/duotone.scss
Normal file
65
src/styles/fa/duotone.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-duotone: 'Font Awesome 6 Duotone';
|
||||
--#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fad,
|
||||
.#{$fa-css-prefix}-duotone {
|
||||
position: relative;
|
||||
font-weight: 900;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.fad::before,
|
||||
.#{$fa-css-prefix}-duotone::before {
|
||||
position: absolute;
|
||||
color: var(--#{$fa-css-prefix}-primary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fad::after,
|
||||
.#{$fa-css-prefix}-duotone::after {
|
||||
color: var(--#{$fa-css-prefix}-secondary-color, inherit);
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fad::before,
|
||||
.#{$fa-css-prefix}-swap-opacity .fa-duotone::before,
|
||||
.fad.#{$fa-css-prefix}-swap-opacity::before,
|
||||
.fa-duotone.#{$fa-css-prefix}-swap-opacity::before {
|
||||
opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-swap-opacity .fad::after,
|
||||
.#{$fa-css-prefix}-swap-opacity .fa-duotone::after,
|
||||
.fad.#{$fa-css-prefix}-swap-opacity::after,
|
||||
.fa-duotone.#{$fa-css-prefix}-swap-opacity::after {
|
||||
opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
|
||||
}
|
||||
|
||||
.fad.#{$fa-css-prefix}-inverse,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
|
||||
}
|
||||
|
||||
.fad.#{$fa-css-prefix}-stack-1x, .fad.#{$fa-css-prefix}-stack-2x,
|
||||
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x {
|
||||
position: absolute;
|
||||
}
|
||||
21
src/styles/fa/fontawesome.scss
vendored
Normal file
21
src/styles/fa/fontawesome.scss
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
// Font Awesome core compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'core';
|
||||
@import 'sizing';
|
||||
@import 'fixed-width';
|
||||
@import 'list';
|
||||
@import 'bordered-pulled';
|
||||
@import 'animated';
|
||||
@import 'rotated-flipped';
|
||||
@import 'stacked';
|
||||
@import 'icons';
|
||||
@import 'screen-reader';
|
||||
BIN
src/styles/fa/fonts/fa-brands-400.ttf
Normal file
BIN
src/styles/fa/fonts/fa-brands-400.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-brands-400.woff2
Normal file
BIN
src/styles/fa/fonts/fa-brands-400.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-duotone-900.ttf
Normal file
BIN
src/styles/fa/fonts/fa-duotone-900.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-duotone-900.woff2
Normal file
BIN
src/styles/fa/fonts/fa-duotone-900.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-light-300.ttf
Normal file
BIN
src/styles/fa/fonts/fa-light-300.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-light-300.woff2
Normal file
BIN
src/styles/fa/fonts/fa-light-300.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-regular-400.ttf
Normal file
BIN
src/styles/fa/fonts/fa-regular-400.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-regular-400.woff2
Normal file
BIN
src/styles/fa/fonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-sharp-solid-900.ttf
Normal file
BIN
src/styles/fa/fonts/fa-sharp-solid-900.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-sharp-solid-900.woff2
Normal file
BIN
src/styles/fa/fonts/fa-sharp-solid-900.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-solid-900.ttf
Normal file
BIN
src/styles/fa/fonts/fa-solid-900.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-solid-900.woff2
Normal file
BIN
src/styles/fa/fonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-thin-100.ttf
Normal file
BIN
src/styles/fa/fonts/fa-thin-100.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-thin-100.woff2
Normal file
BIN
src/styles/fa/fonts/fa-thin-100.woff2
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-v4compatibility.ttf
Normal file
BIN
src/styles/fa/fonts/fa-v4compatibility.ttf
Normal file
Binary file not shown.
BIN
src/styles/fa/fonts/fa-v4compatibility.woff2
Normal file
BIN
src/styles/fa/fonts/fa-v4compatibility.woff2
Normal file
Binary file not shown.
26
src/styles/fa/light.scss
Normal file
26
src/styles/fa/light.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fal,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
26
src/styles/fa/regular.scss
Normal file
26
src/styles/fa/regular.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
26
src/styles/fa/sharp-solid.scss
Normal file
26
src/styles/fa/sharp-solid.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fass,
|
||||
.#{$fa-css-prefix}-sharp-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
26
src/styles/fa/solid.scss
Normal file
26
src/styles/fa/solid.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
26
src/styles/fa/thin.scss
Normal file
26
src/styles/fa/thin.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fat,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
11
src/styles/fa/v4-shims.scss
Normal file
11
src/styles/fa/v4-shims.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'shims';
|
||||
BIN
src/styles/fonts/4iCs6KVjbNBYlgoKfw72.woff2
Normal file
BIN
src/styles/fonts/4iCs6KVjbNBYlgoKfw72.woff2
Normal file
Binary file not shown.
BIN
src/styles/fonts/4iCv6KVjbNBYlgoCxCvjsGyN.woff2
Normal file
BIN
src/styles/fonts/4iCv6KVjbNBYlgoCxCvjsGyN.woff2
Normal file
Binary file not shown.
148
src/styles/leaflet/_leaflet_heightgraph.scss
Normal file
148
src/styles/leaflet/_leaflet_heightgraph.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
.heightgraph-container {
|
||||
background-color: rgba(250,250,250,.8);
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.heightgraph-toggle {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
|
||||
border-radius: 5px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #f8f8f9;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.heightgraph-toggle-icon {
|
||||
background: url(img/area-chart.svg) no-repeat center center;
|
||||
background-size: 14px 14px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.heightgraph-close-icon {
|
||||
background: url(img/remove.svg) no-repeat center center;
|
||||
background-size: 14px 14px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.legend-hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
fill: #000;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tick, .tick text {
|
||||
fill: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.axis .tick line {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.axis path {
|
||||
stroke: black;
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
shape-rendering: crispEdges;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
fill: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox rect {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 1px;
|
||||
stroke: #888;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focusbox text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.focusLine line {
|
||||
stroke-width: 1px;
|
||||
stroke: rgb(20, 20, 20);
|
||||
display: none;
|
||||
cursor: default;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.height-focus.label rect {
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
stroke-width: 1px;
|
||||
stroke: #888;
|
||||
pointer-events: none;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.height-focus.line {
|
||||
stroke: rgb(20, 20, 20);
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.height-focus.circle {
|
||||
stroke: #FFF;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.mouse-height-box-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid .tick {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid .tick line {
|
||||
stroke: #EEE;
|
||||
stroke-width: 1px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tspan {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.select-symbol {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-info {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lineSelection {
|
||||
cursor: move;
|
||||
}
|
||||
16
src/styles/spot.scss
Executable file
16
src/styles/spot.scss
Executable file
@@ -0,0 +1,16 @@
|
||||
/* Site Global CSS */
|
||||
@import 'fonts';
|
||||
@import 'common';
|
||||
|
||||
/* Modules */
|
||||
@import 'fa';
|
||||
@import 'lightbox';
|
||||
@import 'simplebar';
|
||||
@import 'leaflet';
|
||||
|
||||
/* Pages Specific CSS (masks) */
|
||||
@import 'mask_project';
|
||||
@import 'mask_upload';
|
||||
@import 'mask_admin';
|
||||
|
||||
@import 'mobile';
|
||||
Reference in New Issue
Block a user