Replace font awesome font with svg
This commit is contained in:
Generated
+46
@@ -8,6 +8,9 @@
|
||||
"name": "spot",
|
||||
"version": "2.0.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.2.0",
|
||||
"@uppy/core": "^5.2.0",
|
||||
"@uppy/xhr-upload": "^5.2.0",
|
||||
"autosize": "^6.0.1",
|
||||
@@ -1554,6 +1557,49 @@
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
|
||||
"integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
|
||||
"integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "7.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
|
||||
"integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
|
||||
"license": "(CC-BY-4.0 AND MIT)",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "7.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/vue-fontawesome": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.2.0.tgz",
|
||||
"integrity": "sha512-7BwGjTZn8QDvVEIu8fvkHhsDRRv//tq7jtsldaDhF3dE1fyWLIQcEg3zvIzy33su7kcppWsZZ6XRYP5wp3UCgQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
|
||||
"vue": ">= 3.0.0 < 4"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
|
||||
@@ -21,6 +21,9 @@
|
||||
"keywords": [],
|
||||
"author": "Franzz",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.2.0",
|
||||
"@uppy/core": "^5.2.0",
|
||||
"@uppy/xhr-upload": "^5.2.0",
|
||||
"autosize": "^6.0.1",
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
<td><AdminInput :type="'text'" :name="'codename'" :elem="project" /></td>
|
||||
<td><AdminInput :type="'date'" :name="'active_from'" :elem="project" /></td>
|
||||
<td><AdminInput :type="'date'" :name="'active_to'" :elem="project" /></td>
|
||||
<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(project)" /></td>
|
||||
<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(project)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -168,7 +168,7 @@ export default {
|
||||
<td>{{ feed.name }}</td>
|
||||
<td>{{ feed.status }}</td>
|
||||
<td>{{ feed.last_update }}</td>
|
||||
<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(feed)" /></td>
|
||||
<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(feed)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -215,7 +215,7 @@ export default {
|
||||
<td>{{ user.language }}</td>
|
||||
<td>{{ user.timezone }}</td>
|
||||
<td><AdminInput :type="'number'" :name="'clearance'" :elem="user" /></td>
|
||||
<td><SpotButton :icon="'close fa-lg'" @click="deleteElem(user)" /></td>
|
||||
<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(user)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
initLightbox() {
|
||||
lightbox.option({
|
||||
alwaysShowNavOnTouchDevices: true,
|
||||
albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',
|
||||
albumLabel: 'Media %1 / %2',
|
||||
fadeDuration: 300,
|
||||
imageFadeDuration: 400,
|
||||
positionFromTop: 0,
|
||||
@@ -303,7 +303,7 @@ export default {
|
||||
this.markers.messages.forEach(msg => {
|
||||
const el = document.createElement('div');
|
||||
|
||||
const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'message-in', iconSubClasses:'fa-rotate-270'});
|
||||
const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'message-in', iconSubRotation: 270});
|
||||
app.mount(el);
|
||||
|
||||
new Marker({element: el, anchor: 'bottom'})
|
||||
@@ -646,7 +646,9 @@ export default {
|
||||
<div id="projects" :class="projectClasses">
|
||||
<div id="background"></div>
|
||||
<div id="submap">
|
||||
<div class="loader fa fa-fw fa-map flicker"></div>
|
||||
<div class="loader">
|
||||
<SpotIcon :icon="'map'" :classes="'flicker'" fixed-width />
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="settings" class="map-container map-container-left" ref="settings">
|
||||
@@ -660,7 +662,7 @@ export default {
|
||||
<div class="settings-sections">
|
||||
<Simplebar id="settings-sections-scrollbox">
|
||||
<div class="settings-section">
|
||||
<h1><SpotIcon :icon="'project'" :classes="'fa-fw'" :text="lang.get('hikes')" /></h1>
|
||||
<h1><SpotIcon :icon="'project'" fixed-width :text="lang.get('hikes')" /></h1>
|
||||
<div class="settings-section-body">
|
||||
<div class="radio" v-for="project in projects" :key="'project-'+project.id">
|
||||
<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="$parent.hash.items[0]" />
|
||||
@@ -674,7 +676,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h1><SpotIcon :icon="'map'" :classes="'fa-fw'" :text="lang.get('maps')" /></h1>
|
||||
<h1><SpotIcon :icon="'map'" fixed-width :text="lang.get('maps')" /></h1>
|
||||
<div class="settings-section-body">
|
||||
<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
|
||||
<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMap" />
|
||||
@@ -683,9 +685,11 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section newsletter">
|
||||
<h1><SpotIcon :icon="'newsletter'" :classes="'fa-fw'" :text="lang.get('newsletter')" /></h1>
|
||||
<h1><SpotIcon :icon="'newsletter'" fixed-width :text="lang.get('newsletter')" /></h1>
|
||||
<div class="newsletter-form">
|
||||
<input type="email" name="email" id="email" :placeholder="lang.get('nl_email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
|
||||
<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('nl_'+nlAction)" @click="manageSubs" />
|
||||
<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('nl_'+nlAction)" :icon="nlAction" @click="manageSubs" />
|
||||
</div>
|
||||
<div id="settings-feedback" class="feedback">
|
||||
<p v-for="feedback in nlFeedbacks" :class="feedback.type">
|
||||
<SpotIcon :icon="feedback.type" :text="feedback.msg" />
|
||||
@@ -694,10 +698,12 @@ export default {
|
||||
{{ lang.get(subscribed?'nl_subscribed_desc':'nl_unsubscribed_desc') }}
|
||||
</div>
|
||||
<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
|
||||
<h1><SpotIcon :icon="'admin fa-fw'" :text="lang.get('admin')" /></h1>
|
||||
<h1><SpotIcon :icon="'admin'" fixed-width :text="lang.get('admin')" /></h1>
|
||||
<div class="admin-actions">
|
||||
<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin_config')" /></a>
|
||||
<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin_upload')" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</Simplebar>
|
||||
</div>
|
||||
<div class="settings-footer">
|
||||
|
||||
@@ -55,7 +55,7 @@ export default {
|
||||
</a>
|
||||
<div style="display:none">
|
||||
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
|
||||
<spotIcon :icon="'post'" :classes="'fa-lg fa-fw push'" :text-classes="'comment-text'" :text="options.comment" />
|
||||
<spotIcon :icon="'post'" fixed-width size="lg" :text-classes="'comment-text'" :text="options.comment" />
|
||||
</span>
|
||||
<span ref="postedon" class="lb-caption-line">
|
||||
<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_time_local" :siteTime="options.posted_on_formatted_time" :offset="options.posted_on_day_offset" />
|
||||
|
||||
@@ -31,24 +31,24 @@ export default {
|
||||
<div :class="'info-window '+type">
|
||||
<div class="header" v-if="type=='message'">
|
||||
<h1>
|
||||
<spotIcon :icon="'message'" :classes="'fa-lg'" :text="lang.get('post_message')+' '+lang.get('counter', options.displayed_id)" />
|
||||
<spotIcon :icon="'message'" size="lg" :text="lang.get('post_message')+' '+lang.get('counter', options.displayed_id)" />
|
||||
<span class="message-type">({{ options.type }})</span>
|
||||
</h1>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
<p class="coordinates">
|
||||
<spotIcon :icon="'coords'" :classes="'fa-fw fa-lg'" :margin="true" />
|
||||
<spotIcon :icon="'coords'" fixed-width size="lg" :margin="true" />
|
||||
<projectMapLink :options="options" />
|
||||
</p>
|
||||
<p class="altitude" v-if="options.altitude">
|
||||
<spotIcon :icon="'altitude'" :classes="'fa-fw fa-lg'" :text="options.altitude+'m'" />
|
||||
<spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" />
|
||||
</p>
|
||||
<p class="time">
|
||||
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
|
||||
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
|
||||
</p>
|
||||
<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get(options.weather_cond)">
|
||||
<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
|
||||
<spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" />
|
||||
</p>
|
||||
<div v-if="medias.length > 0">
|
||||
<div class="separator"></div>
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
anchorTitle: this.lang.get('copy_to_clipboard'),
|
||||
anchorIcon: 'link',
|
||||
popupRequested: false,
|
||||
mouseOverDrill: false,
|
||||
postMessage: '',
|
||||
sending: false,
|
||||
focusZoomLevel: 15
|
||||
@@ -51,6 +52,9 @@
|
||||
displayedId() {
|
||||
return this.options.displayed_id?(this.lang.get('counter', this.options.displayed_id)):'';
|
||||
},
|
||||
drillMainIcon() {
|
||||
return this.mouseOverDrill?'drill-message':'marker';
|
||||
},
|
||||
anchorLink() {
|
||||
return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.consts.hash_sep);
|
||||
},
|
||||
@@ -139,11 +143,11 @@
|
||||
|
||||
<template>
|
||||
<div :class="postClass" :id="postId">
|
||||
<div class="header">
|
||||
<div class="header" v-if="!options.headerless">
|
||||
<div class="index">
|
||||
<spotIcon :icon="subType" :text="displayedId" />
|
||||
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="anchorLink" :title="anchorTitle">
|
||||
<spotIcon :icon="anchorIcon" />
|
||||
<spotIcon :icon="anchorIcon" :classes="'push-left'" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?lang.get('local_time', absTimeLocal):''">
|
||||
@@ -156,19 +160,18 @@
|
||||
<div class="body">
|
||||
<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
|
||||
<p>
|
||||
<spotIcon :icon="'coords'" :classes="'push'" />
|
||||
<spotIcon :icon="'coords'" :classes="'push'" size="lg" />
|
||||
<projectMapLink :options="options" />
|
||||
</p>
|
||||
<p v-if="timeDiff">
|
||||
<projectRelTime :icon="'time'" :iconClasses="'push'" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
|
||||
</p>
|
||||
<a class="drill" @click.prevent="executeMainAction">
|
||||
<a class="drill" @click.prevent="executeMainAction" @mouseenter="mouseOverDrill = true" @mouseleave="mouseOverDrill = false">
|
||||
<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
|
||||
<spotIcon :icon="options.weather_icon" />
|
||||
<span class="temperature">{{ options.weather_temp+'°C' }}</span>
|
||||
<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
|
||||
</span>
|
||||
<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
|
||||
<spotIconStack :mainClasses="'message drill-icon'" :iconMain="'marker'" :iconSub="'footprint'" :iconSubClasses="'fa-rotate-270'" />
|
||||
<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
|
||||
</a>
|
||||
</div>
|
||||
<div v-else-if="options.type == 'media'" class="body-box">
|
||||
@@ -182,11 +185,13 @@
|
||||
<span>{{ options.formatted_name }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="options.type == 'poster'">
|
||||
<div v-else-if="options.type == 'poster'" class="poster-form">
|
||||
<textarea ref="post" name="post" :placeholder="lang.get('post_message')" class="autoExpand" rows="1" v-model="postMessage"></textarea>
|
||||
<div class="poster-actions">
|
||||
<input type="text" name="name" :placeholder="lang.get('post_name')" v-model="user.name" />
|
||||
<spotButton name="submit" :aria-label="lang.get('send')" :title="lang.get('send')" :icon="'send'" @click="send()" :iconClasses="sending?'flicker':''" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="options.type == 'archived'">
|
||||
<p><spotIcon :icon="'success'" /></p>
|
||||
<p>{{ lang.get('mode_histo') }}</p>
|
||||
|
||||
@@ -17,15 +17,12 @@ export default {
|
||||
computed: {
|
||||
title() {
|
||||
if(this.localTime != this.siteTime) return this.lang.get('your_time', this.siteTime.slice(-5)) + ((this.offset != '0')?' ('+this.lang.get('unit_d')+this.offset+')':'');
|
||||
},
|
||||
spotIconClasses() {
|
||||
return this.iconClasses || 'fa-fw fa-lg';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<spotIcon v-if="icon" :icon="icon" :classes="spotIconClasses" :title="title" :text="localTime" />
|
||||
<spotIcon v-if="icon" :icon="icon" :classes="iconClasses" :title="title" :text="localTime" fixed-width size="lg" />
|
||||
<span v-else :class="classes" :title="title">{{ localTime }}</span>
|
||||
</template>
|
||||
|
||||
@@ -9,10 +9,11 @@ export default {
|
||||
classes: String,
|
||||
text: String,
|
||||
icon: String,
|
||||
iconClasses: String
|
||||
iconClasses: String,
|
||||
iconSize: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<button :class="classes"><SpotIcon :icon="icon" :text="text" :classes="iconClasses" /></button>
|
||||
<button :class="classes"><SpotIcon :icon="icon" :text="text" :classes="iconClasses" :size="iconSize" /></button>
|
||||
</template>
|
||||
@@ -1,24 +1,58 @@
|
||||
<script>
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
import { getIcon } from '../scripts/icons.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FontAwesomeIcon
|
||||
},
|
||||
props: {
|
||||
icon: String,
|
||||
fixedWidth: Boolean,
|
||||
rotation: [Number, String],
|
||||
size: String,
|
||||
classes: String,
|
||||
title: String,
|
||||
text: String,
|
||||
margin: Boolean,
|
||||
classes: String,
|
||||
textClasses: String
|
||||
textClasses: String,
|
||||
transform: String
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return 'fa fa-'+this.icon+((this.margin || this.hasText)?' push':'')+(this.classes?' '+this.classes:'')
|
||||
return [
|
||||
'spot-icon',
|
||||
this.icon,
|
||||
...(this.classes || '').split(/\s+/).filter(Boolean),
|
||||
...(this.margin || this.hasText ? ['push'] : [])
|
||||
].filter(Boolean).join(' ');
|
||||
},
|
||||
resolvedFixedWidth() {
|
||||
return this.fixedWidth || null;
|
||||
},
|
||||
hasText() {
|
||||
return this.text && this.text != '';
|
||||
},
|
||||
iconDefinition() {
|
||||
return getIcon(this.icon);
|
||||
},
|
||||
resolvedRotation() {
|
||||
return this.rotation || null;
|
||||
},
|
||||
resolvedSize() {
|
||||
return this.size || null;
|
||||
},
|
||||
resolvedTransform() {
|
||||
return this.transform || null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :title="title"><i :class="classNames"></i><span v-if="hasText" :class="textClasses">{{ text }}</span></span>
|
||||
<span :title="title" v-if="title || hasText">
|
||||
<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
|
||||
<span v-if="hasText" :class="textClasses">{{ text }}</span>
|
||||
</span>
|
||||
<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
|
||||
</template>
|
||||
@@ -1,20 +1,41 @@
|
||||
<script>
|
||||
import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
|
||||
import spotIcon from './spotIcon.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FontAwesomeLayers,
|
||||
spotIcon
|
||||
},
|
||||
props: {
|
||||
mainClasses: String,
|
||||
iconMain: String,
|
||||
iconMainClasses: String,
|
||||
iconMainTransform: String,
|
||||
iconSub: String,
|
||||
iconSubClasses: String,
|
||||
iconSubTransform: String
|
||||
},
|
||||
computed: {
|
||||
mainClass() {
|
||||
return 'icon-stack fa-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
|
||||
return 'spot-icon-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
|
||||
},
|
||||
iconMainClass() {
|
||||
return this.mergeClasses('main clickable', this.iconMainClasses);
|
||||
},
|
||||
iconSubClass() {
|
||||
return this.mergeClasses('sub', this.iconSubClasses);
|
||||
},
|
||||
iconSubTransformValue() {
|
||||
return this.mergeClasses('shrink-8 up-2', this.iconSubTransform);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mergeClasses(sClassesA, sClassesB) {
|
||||
return [
|
||||
...(sClassesA || '').split(/\s+/),
|
||||
...(sClassesB || '').split(/\s+/)
|
||||
].filter(Boolean).join(' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,7 +43,9 @@ export default {
|
||||
|
||||
<template>
|
||||
<span :class="mainClass">
|
||||
<spotIcon :icon="iconMain" :classes="'fa-stack-2x clickable'+(iconMainClasses?' '+iconMainClasses:'')" />
|
||||
<spotIcon :icon="iconSub" :classes="'fa-stack-1x'+(iconSubClasses?' '+iconSubClasses:'')" />
|
||||
<FontAwesomeLayers>
|
||||
<spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
|
||||
<spotIcon :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
|
||||
</FontAwesomeLayers>
|
||||
</span>
|
||||
</template>
|
||||
@@ -1,57 +0,0 @@
|
||||
<div id="projects">
|
||||
<div id="background"></div>
|
||||
<div id="submap">
|
||||
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="settings">
|
||||
<div id="settings-panel">
|
||||
<div class="settings-header">
|
||||
<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
|
||||
<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
|
||||
</div>
|
||||
<div class="settings-sections">
|
||||
<div id="settings-sections-scrollbox">
|
||||
<div class="settings-section">
|
||||
<h1><i class="fa fa-fw push fa-project"></i>[#]lang:hikes[#]</h1>
|
||||
<div id="settings-projects"></div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h1><i class="fa fa-fw push fa-map"></i>[#]lang:maps[#]</h1>
|
||||
<div id="layers"></div>
|
||||
</div>
|
||||
<div class="settings-section newsletter">
|
||||
<h1><i class="fa fa-fw push fa-newsletter"></i>[#]lang:newsletter[#]</h1>
|
||||
<input type="email" name="email" id="email" placeholder="[#]lang:nl_email_placeholder[#]" /><button id="nl_btn"><span><i class="fa"></i></span></button>
|
||||
<div id="settings-feedback" class="feedback"></div>
|
||||
<div id="nl_desc"></div>
|
||||
</div>
|
||||
<div class="settings-section admin" id="admin_link">
|
||||
<h1><i class="fa fa-fw push fa-admin"></i>[#]lang:admin[#]</h1>
|
||||
<a class="button" id="admin_config" name="admin_config" href="#admin"><i class="fa fa-config push"></i>[#]lang:admin_config[#]</a>
|
||||
<a class="button" id="admin_upload" name="admin_upload" href="#upload"><i class="fa fa-upload push"></i>[#]lang:admin_upload[#]</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-footer"><a href="https://git.lutran.fr/franzz/spot" title="[#]lang:credits_git[#]" target="_blank" rel="noopener"><i class="fa fa-credits push"></i>[#]lang:credits_project[#]</a> [#]lang:credits_license[#]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="feed">
|
||||
<div id="feed-panel">
|
||||
<div id="poster"></div>
|
||||
<div id="posts_list"></div>
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="elems">
|
||||
<div id="settings-button" class="spot-control"><i class="fa fa-menu"></i></div>
|
||||
<div id="feed-button" class="spot-control"><i class="fa"></i></div>
|
||||
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
|
||||
<div class="track"><span class="line main"></span><span class="desc">[#]lang:track_main[#]</span></div>
|
||||
<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_off-track[#]</span></div>
|
||||
<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
|
||||
</div>
|
||||
<div id="title" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded leaflet-control-inline"><span id="project_name" class=""></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile" class="mobile"></div>
|
||||
@@ -1,10 +0,0 @@
|
||||
<div id="upload">
|
||||
<a name="back" class="button" href="[#]server[#]"><i class="fa fa-back push"></i>[#]lang:nav_back[#]</a>
|
||||
<h1>[#]lang:upload_title[#]</h1>
|
||||
<input id="fileupload" type="file" name="files[]" multiple>
|
||||
<div id="progress">
|
||||
<div class="bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div id="comments"></div>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,168 @@
|
||||
import {
|
||||
faArrowsRotate,
|
||||
faBars,
|
||||
faCamera,
|
||||
faCarSide,
|
||||
faChartArea,
|
||||
faCheck,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faCircleCheck,
|
||||
faCircleDown,
|
||||
faCirclePlay,
|
||||
faCircleRight,
|
||||
faCircleUp,
|
||||
faCircleXmark,
|
||||
faCloudArrowUp,
|
||||
faCloudBolt,
|
||||
faCloudMoon,
|
||||
faCloudMoonRain,
|
||||
faCloudRain,
|
||||
faCloudSun,
|
||||
faCloudSunRain,
|
||||
faComment,
|
||||
faCompass,
|
||||
faFileArrowDown,
|
||||
faFilm,
|
||||
faFloppyDisk,
|
||||
faGear,
|
||||
faGlobe,
|
||||
faImage,
|
||||
faLayerGroup,
|
||||
faLink,
|
||||
faLocationPin,
|
||||
faMagnifyingGlass,
|
||||
faMagnifyingGlassLocation,
|
||||
faMapLocationDot,
|
||||
faMountain,
|
||||
faPaperPlane,
|
||||
faPaw,
|
||||
faPersonHiking,
|
||||
faPhotoFilm,
|
||||
faPlus,
|
||||
faScrewdriverWrench,
|
||||
faShoePrints,
|
||||
faSun,
|
||||
faTemperatureThreeQuarters,
|
||||
faTriangleExclamation,
|
||||
faVideo,
|
||||
faWifi,
|
||||
faWind,
|
||||
faClock
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
function customIcon(iconName, width, height, hex, path) {
|
||||
return {
|
||||
prefix: 'fas',
|
||||
iconName,
|
||||
icon: [width, height, [], hex, path]
|
||||
};
|
||||
}
|
||||
|
||||
const faCloudBoltMoon = customIcon('cloud-bolt-moon', 640, 512, 'f76d', 'M399.1 48.4c34.7 19.6 59.3 54.8 64.2 96.1 38.8 22 64.9 63.6 64.9 111.4 35.6 .6 63.5-10.3 89.7-31.2 3.5-2.8 6.9-5.8 10.1-8.9 4.1-4 5.3-10.1 3-15.3s-7.7-8.4-13.4-7.9c-4 .3-7.9 .4-11.9 .3-55.5-1.9-99.9-47.5-99.9-103.4 0-36.3 18.7-68.3 47.1-86.8 3.3-2.2 6.8-4.1 10.3-5.9 5.1-2.5 8.1-8 7.4-13.7s-4.9-10.3-10.4-11.6c-10.5-2.4-21.2-3.5-31.9-3.5-56.7 0-105.8 32.8-129.3 80.5zM206.8 416L175.5 520.1c-3.6 11.9 5.3 23.9 17.8 23.9 4.6 0 9-1.7 12.4-4.7L346.9 412.9c3.5-3.1 5.5-7.6 5.5-12.4 0-9.2-7.4-16.6-16.6-16.6l-61.8 0 31.2-104.1c3.6-11.9-5.3-23.9-17.8-23.9-4.6 0-9 1.7-12.4 4.7L133.9 387.1c-3.5 3.1-5.5 7.6-5.5 12.4 0 9.2 7.4 16.6 16.6 16.6l61.8 0zm193.5-80.1c44.2 0 80-35.8 80-80 0-39.3-28.4-72.1-65.8-78.7 1.2-5.6 1.9-11.3 1.9-17.2 0-44.2-35.8-80-80-80-17 0-32.8 5.3-45.8 14.4-16.8-27.8-47.3-46.4-82.2-46.4-53.1 0-96.3 44.5-96 97.3-45.4 7.6-80 47.1-80 94.6 0 50 38.3 91.1 87.2 95.6L243.1 225c12.2-10.9 28-17 44.4-17 44.6 0 76.5 43 63.7 85.7l-12.7 42.2 61.8 0z');
|
||||
const faCloudBoltSun = customIcon('cloud-bolt-sun', 576, 512, 'f76e', 'M248.5-31c-4.2-1.7-8.9-1.3-12.6 1.2L176 9.9 116.2-29.8c-3.7-2.5-8.5-2.9-12.6-1.2s-7.2 5.4-8.1 9.8L81.2 49.2 10.8 63.4c-4.4 .9-8.1 3.9-9.8 8.1S-.2 80.4 2.3 84.2L41.9 144 2.3 203.8c-2.5 3.7-2.9 8.5-1.2 12.6s5.4 7.2 9.8 8.1l69.3 14c.5-47.2 26.5-88.2 64.9-110 7.3-60.8 57.3-108.5 119.1-112.3l-7.6-37.4c-.9-4.4-3.9-8.1-8.1-9.8zM128 239.9c0 44.2 35.8 80 80 80l6.7 0 124-111c12.2-10.9 28-17 44.4-17 44.6 0 76.5 43 63.7 85.7l-12.7 42.2 45.8 0c53 0 96-43 96-96 0-47.6-34.6-87-80-94.6 .4-52.8-42.9-97.3-96-97.3-34.9 0-65.4 18.6-82.2 46.4-13-9.1-28.8-14.4-45.8-14.4-44.2 0-80 35.8-80 80 0 5.9 .6 11.7 1.9 17.2-37.4 6.7-65.8 39.4-65.8 78.7zM302.4 400L271.2 504.1c-3.6 11.9 5.3 23.9 17.8 23.9 4.6 0 9-1.7 12.4-4.7L442.5 396.9c3.5-3.1 5.5-7.6 5.5-12.4 0-9.2-7.4-16.6-16.6-16.6l-61.8 0 31.2-104.1c3.6-11.9-5.3-23.9-17.8-23.9-4.6 0-9 1.7-12.4 4.7L229.5 371.1c-3.5 3.1-5.5 7.6-5.5 12.4 0 9.2 7.4 16.6 16.6 16.6l61.8 0z');
|
||||
const faCloudFog = customIcon('cloud-fog', 576, 512, 'f74e', 'M32 224c0 53 43 96 96 96l320 0c53 0 96-43 96-96s-43-96-96-96c-.5 0-1.1 0-1.6 0 1.1-5.2 1.6-10.5 1.6-16 0-44.2-35.8-80-80-80-24.3 0-46.1 10.9-60.8 28-18.7-35.7-56.1-60-99.2-60-61.9 0-112 50.1-112 112 0 7.1 .7 14.1 1.9 20.8-38.3 12.6-65.9 48.7-65.9 91.2zM512 392c0-13.3-10.7-24-24-24L24 368c-13.3 0-24 10.7-24 24s10.7 24 24 24l464 0c13.3 0 24-10.7 24-24zM88 464c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0zm176 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l288 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-288 0z');
|
||||
const faCloudHail = customIcon('cloud-hail', 512, 512, 'f739', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm0 80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm160-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM32 480a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm160-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z');
|
||||
const faCloudSleet = customIcon('cloud-sleet', 512, 512, 'f741', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm80 48c13.3 0 24 10.7 24 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24zm272 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zM86.8 399.6l-32 96C50.6 508.2 37 515 24.4 510.8S5 493 9.2 480.4l32-96C45.4 371.8 59 365 71.6 369.2S91 387 86.8 399.6zm248 0l-32 96c-4.2 12.6-17.8 19.4-30.4 15.2S253 493 257.2 480.4l32-96c4.2-12.6 17.8-19.4 30.4-15.2S339 387 334.8 399.6z');
|
||||
const faCloudSnow = customIcon('cloud-snow', 512, 512, 'f742', 'M96 320c-53 0-96-43-96-96 0-42.5 27.6-78.6 65.9-91.2-1.3-6.7-1.9-13.7-1.9-20.8 0-61.9 50.1-112 112-112 43.1 0 80.5 24.3 99.2 60 14.7-17.1 36.5-28 60.8-28 44.2 0 80 35.8 80 80 0 5.5-.6 10.8-1.6 16 .5 0 1.1 0 1.6 0 53 0 96 43 96 96s-43 96-96 96L96 320zm0 72l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zm184 32l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24s24 10.7 24 24zm160-56c13.3 0 24 10.7 24 24l0 16 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-16 0 0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16-16 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-16c0-13.3 10.7-24 24-24z');
|
||||
const faClouds = customIcon('clouds', 576, 512, 'e47d', 'M112.4 276.4c-5.6 3.5-11 7.4-16 11.6l-.4 0c-53 0-96-43-96-96S43 96 96 96l1.1 0c7.8-54.3 54.4-96 110.9-96 47.9 0 88.8 30.1 104.8 72.4 12-5.4 25.2-8.4 39.2-8.4 53 0 96 43 96 96 0 1.3 0 2.7-.1 4-10.2-2.6-20.9-4-31.9-4-14 0-27.4 2.2-40 6.4-27.9-23.9-64.3-38.4-104-38.4-84.4 0-153.6 65.4-159.6 148.4zM184 480c-48.6 0-88-39.4-88-88 0-40.9 27.8-75.2 65.6-85.1-1-6.1-1.6-12.4-1.6-18.9 0-61.9 50.1-112 112-112 39 0 73.3 19.9 93.3 50.1 13.8-11.3 31.4-18.1 50.7-18.1 44.2 0 80 35.8 80 80 0 .4 0 .9 0 1.3 45.4 7.6 80 47.1 80 94.7 0 53-43 96-96 96l-296 0z');
|
||||
const faCommentPen = customIcon('comment-pen', 512, 512, 'f4ae', 'M256 480c141.4 0 256-107.5 256-240S397.4 0 256 0 0 107.5 0 240c0 54.3 19.2 104.3 51.6 144.5L2.8 476.8c-4.8 9-3.3 20 3.6 27.5s17.8 9.8 27.1 5.8l118.4-50.7C183.7 472.6 218.9 480 256 480zM144.4 334.3l12.3-49.4c2.1-8.4 6.5-16.2 12.6-22.3L290.7 141.3c8.5-8.5 20-13.3 32-13.3 25 0 45.3 20.3 45.3 45.3 0 12-4.8 23.5-13.3 32L233.4 326.6c-6.2 6.2-13.9 10.5-22.3 12.6l-49.4 12.3c-1.1 .3-2.3 .4-3.5 .4-7.9 0-14.2-6.4-14.2-14.2 0-1.2 .1-2.3 .4-3.5z');
|
||||
const faMoonStars = customIcon('moon-stars', 512, 512, 'f755', 'M439.8 89.8c1 3.6 4.4 6.2 8.2 6.2s7.1-2.5 8.2-6.2l11-38.6 38.6-11c3.6-1 6.2-4.4 6.2-8.2s-2.5-7.1-6.2-8.2l-38.6-11-11-38.6c-1-3.6-4.4-6.2-8.2-6.2s-7.1 2.5-8.2 6.2l-11 38.6-38.6 11c-3.6 1-6.2 4.4-6.2 8.2s2.5 7.1 6.2 8.2l38.6 11 11 38.6zM224 64C100.3 64 0 164.3 0 288S100.3 512 224 512c60.2 0 114.9-23.8 155.1-62.4 6.4-6.1 8.2-15.7 4.6-23.8s-12-13-20.8-12.3c-4.3 .3-8.6 .5-12.9 .5-88.9 0-161-72.1-161-161 0-63.1 36.3-117.8 89.3-144.2 7.9-4 12.6-12.5 11.5-21.3s-7.6-16-16.2-18C257.6 65.9 241 64 224 64zM355.2 268.8l16.6 58c1.6 5.5 6.6 9.2 12.2 9.2s10.7-3.8 12.2-9.2l16.6-58 58-16.6c5.5-1.6 9.2-6.6 9.2-12.2s-3.8-10.7-9.2-12.2l-58-16.6-16.6-58c-1.6-5.5-6.6-9.2-12.2-9.2s-10.7 3.8-12.2 9.2l-16.6 58-58 16.6c-5.5 1.6-9.2 6.6-9.2 12.2s3.8 10.7 9.2 12.2l58 16.6z');
|
||||
|
||||
const ICONS = {
|
||||
/* Navigation */
|
||||
menu: faBars,
|
||||
error: faTriangleExclamation,
|
||||
warning: faTriangleExclamation,
|
||||
success: faCircleCheck,
|
||||
new: faPlus,
|
||||
refresh: faArrowsRotate,
|
||||
cancel: faImage,
|
||||
prev: faChevronLeft,
|
||||
back: faChevronLeft,
|
||||
next: faChevronRight,
|
||||
close: faCircleXmark,
|
||||
|
||||
/* Map */
|
||||
map: faMapLocationDot,
|
||||
marker: faLocationPin,
|
||||
footprint: faShoePrints,
|
||||
'message-in': faShoePrints,
|
||||
'track-off-track': faPersonHiking,
|
||||
'track-main': faPersonHiking,
|
||||
'track-hitchhiking': faCarSide,
|
||||
'track-start': faPersonHiking,
|
||||
'track-end': faPersonHiking,
|
||||
layers: faLayerGroup,
|
||||
'elev-chart': faChartArea,
|
||||
distance: faCircleRight,
|
||||
'elev-drop': faCircleDown,
|
||||
'elev-gain': faCircleUp,
|
||||
download: faFileArrowDown,
|
||||
|
||||
/* Admin */
|
||||
newsletter: faWifi,
|
||||
project: faPersonHiking,
|
||||
unsubscribe: faCircleXmark,
|
||||
credits: faPaw,
|
||||
admin: faScrewdriverWrench,
|
||||
config: faGear,
|
||||
upload: faCloudArrowUp,
|
||||
|
||||
/* Upload */
|
||||
save: faFloppyDisk,
|
||||
|
||||
/* Feed */
|
||||
post: faComment,
|
||||
media: faPhotoFilm,
|
||||
video: faFilm,
|
||||
image: faImage,
|
||||
message: faLocationPin,
|
||||
time: faClock,
|
||||
coords: faCompass,
|
||||
altitude: faMountain,
|
||||
'drill-video': faCirclePlay,
|
||||
'drill-image': faMagnifyingGlass,
|
||||
'drill-message': faMagnifyingGlassLocation,
|
||||
'video-shot': faVideo,
|
||||
'image-shot': faCamera,
|
||||
link: faLink,
|
||||
copied: faCheck,
|
||||
|
||||
/* Feed - Poster */
|
||||
poster: faCommentPen,
|
||||
send: faPaperPlane,
|
||||
subscribe: faPaperPlane,
|
||||
|
||||
/* Lightbox */
|
||||
timezone: faGlobe,
|
||||
|
||||
/* Weather */
|
||||
temperature: faTemperatureThreeQuarters,
|
||||
'clear-day': faSun,
|
||||
'clear-night': faMoonStars,
|
||||
cloudy: faClouds,
|
||||
fog: faCloudFog,
|
||||
hail: faCloudHail,
|
||||
'partly-cloudy-day': faCloudSun,
|
||||
'partly-cloudy-night': faCloudMoon,
|
||||
'rain-snow-showers-day': faCloudSunRain,
|
||||
'rain-snow-showers-night': faCloudMoonRain,
|
||||
'rain-snow': faCloudSleet,
|
||||
rain: faCloudRain,
|
||||
'showers-day': faCloudSunRain,
|
||||
'showers-night': faCloudMoonRain,
|
||||
sleet: faCloudSleet,
|
||||
snow: faCloudSnow,
|
||||
'snow-showers-day': faCloudSnow,
|
||||
'snow-showers-night': faCloudSnow,
|
||||
'thunder-rain': faCloudBolt,
|
||||
'thunder-showers-day': faCloudBoltSun,
|
||||
'thunder-showers-night': faCloudBoltMoon,
|
||||
thunder: faCloudBolt,
|
||||
wind: faWind
|
||||
};
|
||||
|
||||
export function getIcon(iconName) {
|
||||
return ICONS[iconName] || null;
|
||||
}
|
||||
+4
-114
@@ -1,119 +1,9 @@
|
||||
|
||||
|
||||
|
||||
@use 'fa/solid' with (
|
||||
$fa-css-prefix: fa,
|
||||
$fa-font-path: "fonts"
|
||||
);
|
||||
@use 'fa/mixins';
|
||||
@use 'fa/core';
|
||||
@use 'fa/sizing';
|
||||
@use 'fa/fixed-width';
|
||||
@use 'fa/list';
|
||||
@use 'fa/bordered-pulled';
|
||||
@use 'fa/animated';
|
||||
@use 'fa/rotated-flipped';
|
||||
@use 'fa/stacked';
|
||||
@use "fa/functions";
|
||||
@use "fa/variables";
|
||||
|
||||
|
||||
.fa {
|
||||
.spot-icon {
|
||||
&.push {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
&.push-left {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); }
|
||||
.#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); }
|
||||
.#{variables.$fa-css-prefix}-warning:before { content: functions.fa-content(variables.$fa-var-exclamation-triangle); }
|
||||
.#{variables.$fa-css-prefix}-success:before { content: functions.fa-content(variables.$fa-var-check-circle); }
|
||||
.#{variables.$fa-css-prefix}-new:before { content: functions.fa-content(variables.$fa-var-plus); }
|
||||
.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
|
||||
.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
|
||||
.#{variables.$fa-css-prefix}-cancel:before { content: functions.fa-content(variables.$fa-var-image); }
|
||||
.#{variables.$fa-css-prefix}-prev:before,
|
||||
.#{variables.$fa-css-prefix}-back:before { content: functions.fa-content(variables.$fa-var-chevron-left); }
|
||||
.#{variables.$fa-css-prefix}-next:before { content: functions.fa-content(variables.$fa-var-chevron-right); }
|
||||
.#{variables.$fa-css-prefix}-close:before { content: functions.fa-content(variables.$fa-var-times-circle); }
|
||||
|
||||
/* Map */
|
||||
.#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
|
||||
.#{variables.$fa-css-prefix}-marker:before { content: functions.fa-content(variables.$fa-var-map-marker); }
|
||||
.#{variables.$fa-css-prefix}-footprint:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
|
||||
.#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
|
||||
.#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
|
||||
.#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
|
||||
.#{variables.$fa-css-prefix}-track-start:before { content: functions.fa-content(variables.$fa-var-hiking);}
|
||||
.#{variables.$fa-css-prefix}-track-end:before { content: functions.fa-content(variables.$fa-var-hiking);}
|
||||
.#{variables.$fa-css-prefix}-layers:before { content: functions.fa-content(variables.$fa-var-layer-group); }
|
||||
.#{variables.$fa-css-prefix}-elev-chart:before { content: functions.fa-content(variables.$fa-var-chart-area); }
|
||||
.#{variables.$fa-css-prefix}-distance:before { content: functions.fa-content(variables.$fa-var-arrow-circle-right); }
|
||||
.#{variables.$fa-css-prefix}-elev-drop:before { content: functions.fa-content(variables.$fa-var-arrow-circle-down); }
|
||||
.#{variables.$fa-css-prefix}-elev-gain:before { content: functions.fa-content(variables.$fa-var-arrow-circle-up); }
|
||||
.#{variables.$fa-css-prefix}-download:before { content: functions.fa-content(variables.$fa-var-file-download); }
|
||||
|
||||
/* Admin */
|
||||
.#{variables.$fa-css-prefix}-newsletter:before { content: functions.fa-content(variables.$fa-var-wifi); }
|
||||
.#{variables.$fa-css-prefix}-project:before { content: functions.fa-content(variables.$fa-var-hiking); }
|
||||
.#{variables.$fa-css-prefix}-unsubscribe:before { content: functions.fa-content(variables.$fa-var-times); }
|
||||
.#{variables.$fa-css-prefix}-credits:before { content: functions.fa-content(variables.$fa-var-paw); }
|
||||
.#{variables.$fa-css-prefix}-admin:before { content: functions.fa-content(variables.$fa-var-tools); }
|
||||
.#{variables.$fa-css-prefix}-config:before { content: functions.fa-content(variables.$fa-var-cogs); }
|
||||
.#{variables.$fa-css-prefix}-upload:before { content: functions.fa-content(variables.$fa-var-cloud-upload); }
|
||||
|
||||
/* Upload */
|
||||
.#{variables.$fa-css-prefix}-save:before { content: functions.fa-content(variables.$fa-var-floppy-disk); }
|
||||
|
||||
/* Feed */
|
||||
.#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
|
||||
.#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
|
||||
.#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
|
||||
.#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
|
||||
.#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
|
||||
.#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
|
||||
.#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
|
||||
.#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }
|
||||
.#{variables.$fa-css-prefix}-drill-video:before { content: functions.fa-content(variables.$fa-var-play-circle); }
|
||||
.#{variables.$fa-css-prefix}-drill-image:before { content: functions.fa-content(variables.$fa-var-search); }
|
||||
.#{variables.$fa-css-prefix}-drill-message:before { content: functions.fa-content(variables.$fa-var-magnifying-glass-location); }
|
||||
.#{variables.$fa-css-prefix}-video-shot:before { content: functions.fa-content(variables.$fa-var-camcorder); }
|
||||
.#{variables.$fa-css-prefix}-image-shot:before { content: functions.fa-content(variables.$fa-var-camera-alt); }
|
||||
.#{variables.$fa-css-prefix}-link:before { content: functions.fa-content(variables.$fa-var-link); }
|
||||
.#{variables.$fa-css-prefix}-copied:before { content: functions.fa-content(variables.$fa-var-check); }
|
||||
|
||||
/* Feed - Poster */
|
||||
.#{variables.$fa-css-prefix}-poster:before { content: functions.fa-content(variables.$fa-var-comment-edit); }
|
||||
.#{variables.$fa-css-prefix}-send:before { content: functions.fa-content(variables.$fa-var-paper-plane); }
|
||||
|
||||
/* Lightbox */
|
||||
.#{variables.$fa-css-prefix}-timezone:before { content: functions.fa-content(variables.$fa-var-globe); }
|
||||
|
||||
/* Weather */
|
||||
.#{variables.$fa-css-prefix}-temperature:before { content: functions.fa-content(variables.$fa-var-thermometer-three-quarters); }
|
||||
.#{variables.$fa-css-prefix}-clear-day:before { content: functions.fa-content(variables.$fa-var-sun); }
|
||||
.#{variables.$fa-css-prefix}-clear-night:before { content: functions.fa-content(variables.$fa-var-moon-stars); }
|
||||
.#{variables.$fa-css-prefix}-cloudy:before { content: functions.fa-content(variables.$fa-var-clouds); }
|
||||
.#{variables.$fa-css-prefix}-fog:before { content: functions.fa-content(variables.$fa-var-fog); }
|
||||
.#{variables.$fa-css-prefix}-hail:before { content: functions.fa-content(variables.$fa-var-cloud-hail); }
|
||||
.#{variables.$fa-css-prefix}-partly-cloudy-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun); }
|
||||
.#{variables.$fa-css-prefix}-partly-cloudy-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon); }
|
||||
.#{variables.$fa-css-prefix}-rain-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
|
||||
.#{variables.$fa-css-prefix}-rain-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
|
||||
.#{variables.$fa-css-prefix}-rain-snow:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
|
||||
.#{variables.$fa-css-prefix}-rain:before { content: functions.fa-content(variables.$fa-var-cloud-rain); }
|
||||
.#{variables.$fa-css-prefix}-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
|
||||
.#{variables.$fa-css-prefix}-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
|
||||
.#{variables.$fa-css-prefix}-sleet:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
|
||||
.#{variables.$fa-css-prefix}-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
|
||||
.#{variables.$fa-css-prefix}-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
|
||||
.#{variables.$fa-css-prefix}-snow:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
|
||||
.#{variables.$fa-css-prefix}-thunder-rain:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
|
||||
.#{variables.$fa-css-prefix}-thunder-showers-day:before { content: functions.fa-content(variables.$fa-var-thunderstorm-sun); }
|
||||
.#{variables.$fa-css-prefix}-thunder-showers-night:before { content: functions.fa-content(variables.$fa-var-thunderstorm-moon); }
|
||||
.#{variables.$fa-css-prefix}-thunder:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
|
||||
.#{variables.$fa-css-prefix}-wind:before { content: functions.fa-content(variables.$fa-var-wind); }
|
||||
|
||||
@@ -1,13 +1,26 @@
|
||||
@use "common";
|
||||
@use "fa/variables";
|
||||
@use "fa";
|
||||
@use "color";
|
||||
|
||||
@mixin lightbox-icon($icon) {
|
||||
background: none;
|
||||
font-size: 2em;
|
||||
@extend .fa;
|
||||
@extend .#{variables.$fa-css-prefix}-#{$icon};
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
@if $icon == prev {
|
||||
content: "‹";
|
||||
}
|
||||
@else if $icon == next {
|
||||
content: "›";
|
||||
}
|
||||
@else if $icon == close {
|
||||
content: "×";
|
||||
}
|
||||
@else if $icon == cancel {
|
||||
content: "□";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.lb-disable-scrolling {
|
||||
@@ -89,7 +102,7 @@ body.lb-disable-scrolling {
|
||||
line-height: 1.33333333em;
|
||||
|
||||
&.comment {
|
||||
.fa {
|
||||
.spot-icon {
|
||||
vertical-align: center;
|
||||
}
|
||||
.comment-text {
|
||||
@@ -263,12 +276,12 @@ body.lb-disable-scrolling {
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
@include lightbox-icon(close);
|
||||
@extend .fa-lg;
|
||||
@extend .fa-fw;
|
||||
@extend .clickable;
|
||||
height: auto;
|
||||
font-size: 1.3333333333em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
|
||||
&:hover {
|
||||
color: color.$default-inv-hover;
|
||||
|
||||
@@ -1,23 +1,29 @@
|
||||
@use "fa/variables";
|
||||
@use "var";
|
||||
@use "color";
|
||||
@use "fa";
|
||||
|
||||
#feed {
|
||||
#feed-panel {
|
||||
#feed-header {
|
||||
.poster {
|
||||
textarea[name=post] {
|
||||
margin-bottom: 1em;
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
.poster-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.$block-spacing;
|
||||
|
||||
.poster-actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var.$block-spacing;
|
||||
|
||||
input[name=name] {
|
||||
width: calc(100% - 6em);
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
button[name=submit] {
|
||||
margin-left: 1em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +70,6 @@
|
||||
width: 25%;
|
||||
|
||||
.link {
|
||||
margin-left: var.$elem-spacing;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -84,9 +89,6 @@
|
||||
}
|
||||
|
||||
&.headerless {
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
.body {
|
||||
padding-top: var.$block-spacing;
|
||||
text-align: center;
|
||||
@@ -94,7 +96,7 @@
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
.fa {
|
||||
.spot-icon {
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
margin: var.$elem-spacing 0;
|
||||
@@ -126,18 +128,20 @@
|
||||
line-height: 0;
|
||||
|
||||
.drill-icon {
|
||||
transform: translate(-16px, -32px);
|
||||
|
||||
.drill-hover-icon {
|
||||
display: none;
|
||||
text-shadow: color.$over-img-shadow 3px 3px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
@extend .#{variables.$fa-css-prefix}-drill-message;
|
||||
top: 13px;
|
||||
left: 3px;
|
||||
}
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
.sub {
|
||||
display: none;
|
||||
}
|
||||
.drill-hover-icon {
|
||||
color: color.$message-flashy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,17 +150,23 @@
|
||||
top: var.$block-spacing;
|
||||
right: var.$block-spacing;
|
||||
|
||||
.fa {
|
||||
.spot-icon {
|
||||
font-size: 1.3em;
|
||||
vertical-align: middle;
|
||||
line-height: 1rem;
|
||||
height: 1rem;
|
||||
background: color.$message;
|
||||
color: color.$message-bg;
|
||||
border-radius: var.$block-radius 0 0 var.$block-radius;
|
||||
padding: var.$elem-spacing;
|
||||
|
||||
&.push {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.temperature {
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
vertical-align: middle;
|
||||
padding: var.$elem-spacing;
|
||||
background: color.$message-bg;
|
||||
@@ -173,7 +183,7 @@
|
||||
|
||||
&.post {
|
||||
.body {
|
||||
padding: 0em 1em 0.5em;
|
||||
padding: 0 var.$block-spacing var.$elem-spacing;
|
||||
|
||||
.message {
|
||||
margin: 0;
|
||||
@@ -218,19 +228,18 @@
|
||||
}
|
||||
|
||||
.drill-icon {
|
||||
font-size: 3em;
|
||||
|
||||
.fa-drill-image {
|
||||
.drill-image {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
.drill-video {
|
||||
color: color.$over-img-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.drill-icon {
|
||||
.fa-drill-image, .fa-drill-video {
|
||||
.drill-image, .drill-video {
|
||||
color: color.$media-bg;
|
||||
text-shadow: color.$over-img-shadow 3px 3px 3px;
|
||||
}
|
||||
|
||||
@@ -62,15 +62,15 @@ $thumbnail-max-size: 60px;
|
||||
&.drill {
|
||||
font-size: 2em;
|
||||
|
||||
.fa-drill-image {
|
||||
.drill-image {
|
||||
color: transparent;
|
||||
}
|
||||
.fa-drill-video {
|
||||
.drill-video {
|
||||
color: color.$over-img-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa-drill-video, .fa-drill-image {
|
||||
.drill-video, .drill-image {
|
||||
color: color.$default-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@use "common";
|
||||
@use "var";
|
||||
@use "color";
|
||||
@use "fa";
|
||||
|
||||
$panel-width: 30vw;
|
||||
$panel-width-max: "400px + 3 * #{var.$block-spacing}";
|
||||
@@ -91,9 +90,6 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&+ button, &+ a.button {
|
||||
margin-left: var.$elem-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,15 +137,14 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
|
||||
&.map-control-icon {
|
||||
cursor: pointer;
|
||||
|
||||
.fa {
|
||||
@extend .fa-fw;
|
||||
.spot-icon {
|
||||
color: color.$default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: color.$default-inv-bg;
|
||||
|
||||
.fa {
|
||||
.spot-icon {
|
||||
color: color.$default-inv;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@use "fa/variables";
|
||||
@use "var";
|
||||
@use "color";
|
||||
|
||||
@@ -29,8 +28,14 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 2.5em;
|
||||
filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
|
||||
|
||||
i {
|
||||
&.message {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.spot-icon {
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
}
|
||||
}
|
||||
@@ -38,43 +43,35 @@
|
||||
|
||||
/* Icon Stack */
|
||||
|
||||
.icon-stack {
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
font-size: 32px;
|
||||
text-shadow: color.$over-img-shadow 3px 3px 3px;
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
font-size: 13px;
|
||||
.spot-icon-stack {
|
||||
&:not(.drill-icon) {
|
||||
font-size: 2.5em;
|
||||
filter: drop-shadow(3px 3px 3px color.$over-img-shadow);
|
||||
}
|
||||
|
||||
&.message {
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
.main {
|
||||
color: color.$message-flashy;
|
||||
}
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
.sub {
|
||||
color: color.$message;
|
||||
}
|
||||
}
|
||||
|
||||
&.media {
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
.main {
|
||||
color: color.$media-flashy;
|
||||
}
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
.sub {
|
||||
color: color.$media;
|
||||
}
|
||||
}
|
||||
|
||||
&.track {
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
font-size: 14px;
|
||||
top: 1px;
|
||||
}
|
||||
.#{variables.$fa-css-prefix}-track-start {
|
||||
.track-start {
|
||||
color: color.$track-start;
|
||||
}
|
||||
.#{variables.$fa-css-prefix}-track-end {
|
||||
.track-end {
|
||||
color: color.$track-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@use "common";
|
||||
@use "var";
|
||||
@use "color";
|
||||
@use "fa";
|
||||
|
||||
#settings {
|
||||
#settings-panel {
|
||||
@@ -114,24 +113,25 @@
|
||||
}
|
||||
|
||||
&.newsletter {
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var.$block-spacing;
|
||||
margin-bottom: var.$block-spacing;
|
||||
|
||||
input#email {
|
||||
width: calc(100% - 6em);
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
&:disabled {
|
||||
color: color.$default-disabled;
|
||||
background: color.$default-bg-trans-disabled;
|
||||
}
|
||||
}
|
||||
button#nl_btn {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&.subscribe .fa {
|
||||
@extend .fa-send;
|
||||
}
|
||||
&.unsubscribe .fa {
|
||||
@extend .fa-unsubscribe;
|
||||
}
|
||||
button#nl_btn {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.loading {
|
||||
background-color: color.$message;
|
||||
color: color.$post-input-bg;
|
||||
@@ -142,6 +142,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.admin {
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var.$block-spacing;
|
||||
|
||||
a.button {
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// animating icons
|
||||
// --------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-beat {
|
||||
animation-name: #{variables.$fa-css-prefix}-beat;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-bounce {
|
||||
animation-name: #{variables.$fa-css-prefix}-bounce;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-fade {
|
||||
animation-name: #{variables.$fa-css-prefix}-fade;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-beat-fade {
|
||||
animation-name: #{variables.$fa-css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-flip {
|
||||
animation-name: #{variables.$fa-css-prefix}-flip;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-shake {
|
||||
animation-name: #{variables.$fa-css-prefix}-shake;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-spin {
|
||||
animation-name: #{variables.$fa-css-prefix}-spin;
|
||||
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-spin-reverse {
|
||||
--#{variables.$fa-css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-pulse,
|
||||
.#{variables.$fa-css-prefix}-spin-pulse {
|
||||
animation-name: #{variables.$fa-css-prefix}-spin;
|
||||
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{variables.$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) {
|
||||
.#{variables.$fa-css-prefix}-beat,
|
||||
.#{variables.$fa-css-prefix}-bounce,
|
||||
.#{variables.$fa-css-prefix}-fade,
|
||||
.#{variables.$fa-css-prefix}-beat-fade,
|
||||
.#{variables.$fa-css-prefix}-flip,
|
||||
.#{variables.$fa-css-prefix}-pulse,
|
||||
.#{variables.$fa-css-prefix}-shake,
|
||||
.#{variables.$fa-css-prefix}-spin,
|
||||
.#{variables.$fa-css-prefix}-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{variables.$fa-css-prefix}-beat {
|
||||
0%, 90% { transform: scale(1); }
|
||||
45% { transform: scale(var(--#{variables.$fa-css-prefix}-beat-scale, 1.25)); }
|
||||
}
|
||||
|
||||
@keyframes #{variables.$fa-css-prefix}-bounce {
|
||||
0% { transform: scale(1,1) translateY(0); }
|
||||
10% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{variables.$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{variables.$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{variables.$fa-css-prefix}-bounce-height, -0.5em)); }
|
||||
50% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{variables.$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% { transform: scale(1,1) translateY(var(--#{variables.$fa-css-prefix}-bounce-rebound, -0.125em)); }
|
||||
64% { transform: scale(1,1) translateY(0); }
|
||||
100% { transform: scale(1,1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes #{variables.$fa-css-prefix}-fade {
|
||||
50% { opacity: var(--#{variables.$fa-css-prefix}-fade-opacity, 0.4); }
|
||||
}
|
||||
|
||||
@keyframes #{variables.$fa-css-prefix}-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--#{variables.$fa-css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{variables.$fa-css-prefix}-beat-fade-scale, 1.125));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{variables.$fa-css-prefix}-flip {
|
||||
50% {
|
||||
transform: rotate3d(var(--#{variables.$fa-css-prefix}-flip-x, 0), var(--#{variables.$fa-css-prefix}-flip-y, 1), var(--#{variables.$fa-css-prefix}-flip-z, 0), var(--#{variables.$fa-css-prefix}-flip-angle, -180deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{variables.$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 #{variables.$fa-css-prefix}-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// bordered + pulled icons
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-border {
|
||||
border-color: var(--#{variables.$fa-css-prefix}-border-color, #{variables.$fa-border-color});
|
||||
border-radius: var(--#{variables.$fa-css-prefix}-border-radius, #{variables.$fa-border-radius});
|
||||
border-style: var(--#{variables.$fa-css-prefix}-border-style, #{variables.$fa-border-style});
|
||||
border-width: var(--#{variables.$fa-css-prefix}-border-width, #{variables.$fa-border-width});
|
||||
padding: var(--#{variables.$fa-css-prefix}-border-padding, #{variables.$fa-border-padding});
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix} {
|
||||
font-family: var(--#{variables.$fa-css-prefix}-style-family, '#{variables.$fa-style-family}');
|
||||
font-weight: var(--#{variables.$fa-css-prefix}-style, #{variables.$fa-style});
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix},
|
||||
.#{variables.$fa-css-prefix}-classic,
|
||||
.#{variables.$fa-css-prefix}-sharp,
|
||||
.fas,
|
||||
.#{variables.$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{variables.$fa-css-prefix}-regular,
|
||||
.fasr,
|
||||
.fal,
|
||||
.#{variables.$fa-css-prefix}-light,
|
||||
.fasl,
|
||||
.fat,
|
||||
.#{variables.$fa-css-prefix}-thin,
|
||||
.fast,
|
||||
.fad,
|
||||
.#{variables.$fa-css-prefix}-duotone,
|
||||
.fass,
|
||||
.#{variables.$fa-css-prefix}-sharp-solid,
|
||||
.fab,
|
||||
.#{variables.$fa-css-prefix}-brands {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--#{variables.$fa-css-prefix}-display, #{variables.$fa-display});
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{variables.$fa-css-prefix}-classic,
|
||||
.#{variables.$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{variables.$fa-css-prefix}-regular,
|
||||
.fal,
|
||||
.#{variables.$fa-css-prefix}-light,
|
||||
.fat,
|
||||
.#{variables.$fa-css-prefix}-thin {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{variables.$fa-css-prefix}-brands {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
}
|
||||
|
||||
.fad,
|
||||
.#{variables.$fa-css-prefix}-classic.#{variables.$fa-css-prefix}-duotone,
|
||||
.#{variables.$fa-css-prefix}-duotone {
|
||||
font-family: 'Font Awesome 6 Duotone';
|
||||
}
|
||||
|
||||
.fass,
|
||||
.fasr,
|
||||
.fasl,
|
||||
.fast,
|
||||
.#{variables.$fa-css-prefix}-sharp {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
}
|
||||
.fass,
|
||||
.#{variables.$fa-css-prefix}-sharp {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
%fa-icon {
|
||||
@include mixins.fa-icon;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
// 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 }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// fixed-width icons
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-fw {
|
||||
text-align: center;
|
||||
width: variables.$fa-fw-width;
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
@use "sass:math";
|
||||
@use "sass:string";
|
||||
// functions
|
||||
// --------------------------
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($fa-var) {
|
||||
@return string.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(sass($dividend > 0 and $divisor > 0): 1; else: -1);
|
||||
$dividend: math.abs($dividend);
|
||||
$divisor: math.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;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
// 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 }\""); }
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--#{variables.$fa-css-prefix}-li-margin, #{variables.$fa-li-margin});
|
||||
padding-left: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-li {
|
||||
left: calc(var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width}) * -1);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
@use "sass:string";
|
||||
@use "functions";
|
||||
@use "variables";
|
||||
|
||||
// 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: functions.fa-divide($font-size, variables.$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: functions.fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
||||
vertical-align: (functions.fa-divide(6, $font-size) - functions.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: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-regular($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-regular;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-light($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-light;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-thin($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-thin;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-duotone($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-duotone;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
&::after {
|
||||
content: string.unquote("\"#{ $fa-var }#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-solid($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-solid;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-regular($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-regular;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-light($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-light;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-sharp-thin($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-sharp-thin;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa-icon-brands($fa-var) {
|
||||
@extend %fa-icon;
|
||||
@extend .fa-brands;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-flip-both,
|
||||
.#{variables.$fa-css-prefix}-flip-horizontal.#{variables.$fa-css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{variables.$fa-css-prefix}-rotate-angle, none));
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{variables.$fa-css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in variables.$fa-sizes {
|
||||
.#{variables.$fa-css-prefix}-#{$size} {
|
||||
@include mixins.fa-size($value);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
|
||||
.#{variables.$fa-css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: variables.$fa-stack-vertical-align;
|
||||
width: variables.$fa-stack-width;
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-stack-1x,
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--#{variables.$fa-css-prefix}-stack-z-index, #{variables.$fa-stack-z-index});
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{variables.$fa-css-prefix}-inverse {
|
||||
color: var(--#{variables.$fa-css-prefix}-inverse, #{variables.$fa-inverse});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,30 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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 }\""); }
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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;
|
||||
}
|
||||
Vendored
-21
@@ -1,21 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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';
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-light-300.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-light-300.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasl,
|
||||
.#{$fa-css-prefix}-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-regular-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fasr,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
|
||||
--#{$fa-css-prefix}-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Sharp';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-sharp-thin-100.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-sharp-thin-100.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fast,
|
||||
.#{$fa-css-prefix}-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
@use 'functions';
|
||||
@forward 'variables' show $fa-css-prefix, $fa-font-path;
|
||||
@use 'variables';
|
||||
|
||||
:root, :host {
|
||||
--#{variables.$fa-css-prefix}-style-family-classic: '#{ variables.$fa-style-family }';
|
||||
--#{variables.$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ variables.$fa-style-family }';
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: variables.$fa-font-display;
|
||||
src: url('#{variables.$fa-font-path}/fa-solid-900.woff2') format('woff2'),
|
||||
url('#{variables.$fa-font-path}/fa-solid-900.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{variables.$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 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;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2023 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'shims';
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,6 +1,5 @@
|
||||
/* Site Global CSS */
|
||||
@use "sass:meta";
|
||||
@use 'fonts';
|
||||
@use 'common';
|
||||
|
||||
/* Modules */
|
||||
|
||||
Reference in New Issue
Block a user