mirror of
https://github.com/igorski/bitmappery.git
synced 2026-06-16 19:25:38 +02:00
Small quality of life improvements with regards to styling
This commit is contained in:
Igor Zinken
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" fill="#b6b6b6" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M75.83,73.05L75.83,73.05c-3.28-3.26-5.54-5.99-7.79-8.72 c-1.95-2.35-3.9-4.72-6.52-7.41L46.03,73.77c-0.1,0.11-0.22,0.2-0.36,0.27c-1.06,0.54-2.25,0.73-3.4,0.55 c-1.12-0.17-2.2-0.68-3.07-1.54c-1.09-1.07-1.65-2.5-1.66-3.92c-0.01-1.44,0.52-2.87,1.6-3.97c5.83-6.43,12.07-13.94,18.11-19.99 c1.24-1.23,2.69-1.84,4.15-1.83c1.44,0.01,2.85,0.6,4.05,1.76c5.34,4.94,13.32,14.33,18.28,20.06c1.06,1.08,1.6,2.49,1.6,3.9 c0,1.39-0.51,2.78-1.53,3.86l-0.1,0.1c-1.08,1.08-2.51,1.63-3.94,1.63c-1.39,0-2.78-0.51-3.86-1.54L75.83,73.05L75.83,73.05z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22 c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23c2.26-2.26,3.67-5.38,3.67-8.81V22.71 c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" fill="#b6b6b6" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M75.82,45.83l0.09-0.09c1.08-1.02,2.47-1.54,3.86-1.53 c1.43,0,2.85,0.55,3.93,1.64c0.03,0.01,0.08,0.07,0.1,0.1c1.02,1.08,1.54,2.47,1.54,3.86c0,1.41-0.54,2.82-1.6,3.9 c-5.54,6.04-12.51,14.74-18.28,20.06c-1.2,1.16-2.61,1.75-4.05,1.76c-1.47,0-2.92-0.6-4.15-1.83 c-4.19-3.38-13.84-15.27-18.12-19.99c-1.08-1.1-1.61-2.53-1.6-3.96c0.01-1.44,0.57-2.86,1.66-3.93c0.87-0.85,1.95-1.37,3.07-1.54 c1.15-0.17,2.34,0.01,3.4,0.56c0.14,0.07,0.26,0.16,0.35,0.27l15.48,16.85c2.62-2.7,4.57-5.06,6.52-7.41 C70.29,51.8,72.54,49.08,75.82,45.83L75.82,45.83z M100.16,10.24H22.72c-3.43,0-6.55,1.41-8.81,3.67 c-2.26,2.26-3.67,5.38-3.67,8.81v74.29c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45 c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81 C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -22,7 +22,7 @@
|
||||
*/
|
||||
<template>
|
||||
<div id="app" ref="app">
|
||||
<header-menu />
|
||||
<header-menu @rescale="scaleContainer" />
|
||||
<section class="main">
|
||||
<toolbox
|
||||
ref="toolbox"
|
||||
@@ -40,12 +40,8 @@
|
||||
class="panels"
|
||||
:class="{ 'collapsed': !openedPanels.length }"
|
||||
>
|
||||
<tool-options-panel
|
||||
class="tool-options-panel"
|
||||
/>
|
||||
<layer-panel
|
||||
class="layer-panel"
|
||||
/>
|
||||
<tool-options-panel class="tool-options-panel" />
|
||||
<layer-panel class="layer-panel" />
|
||||
</div>
|
||||
</section>
|
||||
<!-- dialog window used for information messages, alerts and confirmations -->
|
||||
@@ -74,7 +70,6 @@
|
||||
<script lang="ts">
|
||||
import { type Component, defineAsyncComponent } from "vue";
|
||||
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
|
||||
import { createI18n } from "vue-i18n";
|
||||
import HeaderMenu from "@/components/menus/header-menu/header-menu.vue";
|
||||
import ToolOptionsPanel from "@/components/tool-options-panel/tool-options-panel.vue";
|
||||
import LayerPanel from "@/components/layer-panel/layer-panel.vue";
|
||||
@@ -92,7 +87,6 @@ import { renderState } from "@/services/render-service";
|
||||
import ImageToDocumentManager from "@/mixins/image-to-document-manager";
|
||||
import { readClipboardFiles, readDroppedFiles } from "@/utils/file-util";
|
||||
import { truncate } from "@/utils/string-util";
|
||||
import messages from "./messages.json";
|
||||
import {
|
||||
CREATE_DOCUMENT, RESIZE_DOCUMENT, SAVE_DOCUMENT, EXPORT_WINDOW,
|
||||
DROPBOX_FILE_SELECTOR, GOOGLE_DRIVE_FILE_SELECTOR, AWS_S3_FILE_SELECTOR,
|
||||
@@ -100,10 +94,6 @@ import {
|
||||
GRID_TO_LAYERS, STROKE_SELECTION, ANIMATION_PREVIEW, DOCUMENT_PROPERTIES,
|
||||
} from "@/definitions/modal-windows";
|
||||
|
||||
// Create VueI18n instance with options
|
||||
const i18n = createI18n({
|
||||
messages
|
||||
});
|
||||
let lastDocumentId: string | undefined;
|
||||
|
||||
// wrapper for loading dynamic components with custom loading states
|
||||
@@ -351,7 +341,7 @@ export default {
|
||||
}
|
||||
const toolboxWidth = this.$refs.toolbox?.$el.clientWidth;
|
||||
const optionsPanelWidth = this.$refs.panels?.clientWidth;
|
||||
this.docWidth = `calc(100% - ${toolboxWidth + optionsPanelWidth + 32}px)`;
|
||||
this.docWidth = `calc(100% - ${toolboxWidth + optionsPanelWidth + 16}px)`;
|
||||
this.$nextTick(() => this.$refs.documentCanvas?.calcIdealDimensions());
|
||||
},
|
||||
}
|
||||
@@ -386,7 +376,7 @@ export default {
|
||||
position: relative;
|
||||
|
||||
@include mixins.large() {
|
||||
padding: variables.$spacing-medium;
|
||||
padding: variables.$spacing-small;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -402,7 +392,7 @@ export default {
|
||||
|
||||
.document-container {
|
||||
width: 100%;
|
||||
margin: 0 variables.$spacing-medium;
|
||||
margin: 0 variables.$spacing-small;
|
||||
}
|
||||
|
||||
/* three column layout on tablet / desktops */
|
||||
@@ -424,40 +414,35 @@ export default {
|
||||
display: none;
|
||||
}
|
||||
.component__header-button {
|
||||
right: variables.$spacing-xxsmall !important;
|
||||
right: variables.$spacing-small;// !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panels {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - variables.$spacing-xsmall );
|
||||
$optionsHeight: 250px;
|
||||
height: calc(100% - ( variables.$spacing-small + variables.$spacing-xsmall ));
|
||||
|
||||
.tool-options-panel {
|
||||
height: calc(#{$optionsHeight - math.div( variables.$spacing-medium, 2 )});
|
||||
flex: 0 0 auto; // expand to fit content
|
||||
min-height: 220px;
|
||||
|
||||
&.collapsed {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
.layer-panel {
|
||||
margin-top: variables.$spacing-medium;
|
||||
}
|
||||
|
||||
@include mixins.minHeight( 900px ) {
|
||||
$optionsHeight: 390px;
|
||||
.tool-options-panel {
|
||||
height: calc(#{$optionsHeight - math.div( variables.$spacing-medium, 2 )});
|
||||
}
|
||||
.layer-panel {
|
||||
height: calc(100% - #{$optionsHeight + math.div( variables.$spacing-medium, 2 )});
|
||||
margin-top: variables.$spacing-medium;
|
||||
}
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin-top: variables.$spacing-small;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbox {
|
||||
width: 105px;
|
||||
width: 94px;
|
||||
}
|
||||
.panels {
|
||||
width: 300px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -474,7 +459,6 @@ export default {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-height: 50%;
|
||||
//max-height: calc(100% - #{variables.$menu-height * 3});
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
border-top: 1px solid colors.$color-bg;
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<div class="component__actions">
|
||||
<div class="component__actions-content">
|
||||
<div class="form component__actions-form">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<input
|
||||
v-model="newFolderName"
|
||||
:placeholder="$t('newFolderName')"
|
||||
|
||||
@@ -267,7 +267,7 @@ export default {
|
||||
@use "@/styles/_mixins";
|
||||
@use "@/styles/_variables";
|
||||
|
||||
$size: variables.$spacing-medium;
|
||||
$size: variables.$spacing-small;
|
||||
|
||||
.scroll {
|
||||
position: absolute;
|
||||
|
||||
@@ -128,7 +128,6 @@ export default {
|
||||
@use "@/styles/_variables";
|
||||
|
||||
$metaHeight: 80px;
|
||||
$colorBg: colors.$color-bg-dark;
|
||||
$colorLines: colors.$color-bg-light;
|
||||
|
||||
.document-preview {
|
||||
@@ -160,13 +159,13 @@ $colorLines: colors.$color-bg-light;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - $metaHeight);
|
||||
background-color: $colorBg;
|
||||
border: 1px solid $colorLines;
|
||||
overscroll-behavior-y: none; // prevents bounce on scroll end
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
background: url( "../../assets-inline/images/document_transparent_bg.png" ) repeat;
|
||||
|
||||
&--crisp {
|
||||
image-rendering: pixelated;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="save()">
|
||||
<h3 v-t="'options'" class="title"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--picker">
|
||||
<label v-t="'backgroundColor'"></label>
|
||||
<color-picker
|
||||
v-model="backgroundColor"
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
></button>
|
||||
<component :is="s3ImportType" />
|
||||
</template>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'openImageAsNew'" class="file-target-label"></label>
|
||||
<select-box
|
||||
:options="fileTargetOptions"
|
||||
@@ -219,4 +219,8 @@ export default {
|
||||
.button--third-party:last-of-type {
|
||||
margin-bottom: variables.$spacing-medium;
|
||||
}
|
||||
|
||||
.wrapper--select {
|
||||
margin-top: variables.$spacing-medium;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="save()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'name'"></label>
|
||||
<input
|
||||
ref="first"
|
||||
@@ -36,14 +36,14 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input wrapper--small">
|
||||
<div class="wrapper wrapper--select wrapper--small">
|
||||
<label v-t="'documentType'"></label>
|
||||
<select-box
|
||||
:options="types"
|
||||
v-model="type"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input wrapper--small">
|
||||
<div class="wrapper wrapper--select wrapper--small">
|
||||
<label v-t="'preset'"></label>
|
||||
<select-box
|
||||
:options="presets"
|
||||
@@ -54,7 +54,7 @@
|
||||
v-model="dimensions"
|
||||
/>
|
||||
<h3 v-t="'options'" class="title"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--picker">
|
||||
<label v-t="'backgroundColor'"></label>
|
||||
<color-picker
|
||||
v-model="backgroundColor"
|
||||
@@ -191,7 +191,7 @@ export default {
|
||||
@use "@/styles/ui";
|
||||
|
||||
.create-document {
|
||||
@include ui.modalBase( 480px, 445px );
|
||||
@include ui.modalBase( 480px, 450px );
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<template #content>
|
||||
<div class="export-ui">
|
||||
<div class="form export-form" @keyup.enter="exportImage">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'imageType'"></label>
|
||||
<select-box
|
||||
:options="fileTypes"
|
||||
@@ -46,7 +46,7 @@
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'fileName'"></label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -55,25 +55,26 @@
|
||||
/>
|
||||
</div>
|
||||
<template v-if="canCreateAnimatedGIF">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'layersToAnimation'"></label>
|
||||
<toggle-button
|
||||
v-model="exportAnimation"
|
||||
name="createAnimatedGIF"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="exportAnimation" class="wrapper input">
|
||||
<div v-if="exportAnimation" class="wrapper wrapper--input wrapper--small">
|
||||
<label v-t="'frameDuration'"></label>
|
||||
<input
|
||||
type="number"
|
||||
v-model="frameDurationMs"
|
||||
class="input-field"
|
||||
/>
|
||||
<span v-t="'millis'" class="input-suffix"></span>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="hasCloudStorage"
|
||||
class="wrapper input"
|
||||
class="wrapper wrapper--select"
|
||||
>
|
||||
<label v-t="'storageLocation'"></label>
|
||||
<select-box
|
||||
@@ -86,7 +87,7 @@
|
||||
<component :is="s3SaveComponent" ref="s3Component" />
|
||||
<template v-if="canCreateSpriteSheet">
|
||||
<p v-t="'layersToSheetExpl'" class="expl"></p>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'layersToSpriteSheet'"></label>
|
||||
<toggle-button
|
||||
v-model="layersToSpriteSheet"
|
||||
@@ -94,7 +95,7 @@
|
||||
/>
|
||||
</div>
|
||||
<template v-if="layersToSpriteSheet">
|
||||
<div class="wrapper input wrapper--small">
|
||||
<div class="wrapper wrapper--input wrapper--small">
|
||||
<label v-t="'columnAmount'"></label>
|
||||
<input
|
||||
type="number"
|
||||
@@ -149,14 +150,14 @@
|
||||
></button>
|
||||
</div>
|
||||
<div class="export-actions__group export-options">
|
||||
<div v-if="showOriginal" class="wrapper input option-button">
|
||||
<div v-if="showOriginal" class="wrapper wrapper--toggle option-button">
|
||||
<label v-t="'syncScroll'"></label>
|
||||
<toggle-button
|
||||
v-model="syncPreviews"
|
||||
name="syncPreviews"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="canChooseSize" class="wrapper input option-button">
|
||||
<div v-if="canChooseSize" class="wrapper wrapper--toggle option-button">
|
||||
<label v-t="'viewActualSize'"></label>
|
||||
<toggle-button
|
||||
v-model="actualSize"
|
||||
@@ -232,7 +233,7 @@ export default {
|
||||
showOriginal(): boolean {
|
||||
// see _variables.scss $preview-ideal-width and $preview-ideal-height
|
||||
const isLargeEnough = this.windowSize.width >= 1280 && this.windowSize.height >= 700;
|
||||
return isLargeEnough && !this.exportAnimation;
|
||||
return isLargeEnough && ( !this.exportAnimation || !this.canCreateAnimatedGIF );
|
||||
},
|
||||
selectedType(): string {
|
||||
return typeToExt( this.type );
|
||||
@@ -495,7 +496,7 @@ export default {
|
||||
@use "@/styles/typography";
|
||||
@use "@/styles/ui";
|
||||
|
||||
$idealFormWidth: 340px;
|
||||
$idealFormWidth: 310px;
|
||||
|
||||
.export-modal {
|
||||
width: 100%;
|
||||
@@ -504,6 +505,9 @@ $idealFormWidth: 340px;
|
||||
.export-form {
|
||||
width: $idealFormWidth;
|
||||
max-width: $idealFormWidth;
|
||||
padding: variables.$spacing-medium variables.$spacing-large;
|
||||
border: 1px dotted colors.$color-lines-dark;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.export-actions {
|
||||
|
||||
@@ -7,10 +7,11 @@
|
||||
"original": "Original",
|
||||
"exported": "{type} quality: {quality}%",
|
||||
"syncScroll": "Sync scroll",
|
||||
"layersToAnimation": "As animation",
|
||||
"frameDuration": "Frame duration (ms)",
|
||||
"layersToAnimation": "To animation",
|
||||
"frameDuration": "Frame duration",
|
||||
"millis": "(ms)",
|
||||
"layersToSheetExpl": "This documents size supports combining its contents into a tiled sheet (for instance to turn animation tiles / layered content into a spritesheet)",
|
||||
"layersToSpriteSheet": "Merge into sheet",
|
||||
"layersToSpriteSheet": "To spritesheet",
|
||||
"columnAmount": "Column amount",
|
||||
"export": "Export",
|
||||
"cancel": "Cancel",
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
*/
|
||||
<template>
|
||||
<div class="save-s3-document">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'folder'"></label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
*/
|
||||
<template>
|
||||
<div class="save-dropbox-document">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'folder'"></label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
*/
|
||||
<template>
|
||||
<div class="save-drive-document">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'folder'"></label>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
class="form"
|
||||
@keyup.enter="requestSave()"
|
||||
>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'documentTitle'"></label>
|
||||
<input
|
||||
ref="nameInput"
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="hasCloudStorage"
|
||||
class="wrapper input"
|
||||
class="wrapper wrapper--select"
|
||||
>
|
||||
<label v-t="'storageLocation'"></label>
|
||||
<select-box
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="form" @keyup.enter="requestSlice()">
|
||||
<p v-t="'gridSliceExpl'" class="expl"></p>
|
||||
<p>{{ $t( "currentDocumentSize", { width: Math.round( activeDocument.width ), height: Math.round( activeDocument.height ) }) }}</p>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'width'"></label>
|
||||
<input
|
||||
ref="widthInput"
|
||||
@@ -39,7 +39,7 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'height'"></label>
|
||||
<input
|
||||
v-model.number="height"
|
||||
@@ -49,7 +49,7 @@
|
||||
/>
|
||||
</div>
|
||||
<p v-t="'layerVisibilityExpl'" class="expl"></p>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'allLayersVisible'"></label>
|
||||
<toggle-button
|
||||
v-model="allVisible"
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="layer-effects" ref="effectsPanel">
|
||||
<div class="component__content form" ref="effectsList">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'enabled'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.enabled"
|
||||
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<fieldset class="fieldset">
|
||||
<legend v-t="'compositing'" />
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'blendMode'"></label>
|
||||
<select-box
|
||||
v-model="internalValue.blendMode"
|
||||
@@ -41,7 +41,7 @@
|
||||
:disabled="activeLayerIndex === 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'opacity'"></label>
|
||||
<slider
|
||||
v-model="opacity"
|
||||
@@ -53,7 +53,7 @@
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend v-t="'toneAdjustments'" />
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'gamma'"></label>
|
||||
<slider
|
||||
v-model="gamma"
|
||||
@@ -62,7 +62,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'brightness'"></label>
|
||||
<slider
|
||||
v-model="brightness"
|
||||
@@ -71,7 +71,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'contrast'"></label>
|
||||
<slider
|
||||
v-model="contrast"
|
||||
@@ -83,7 +83,7 @@
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend v-t="'colorAdjustments'" />
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'vibrance'"></label>
|
||||
<slider
|
||||
v-model="vibrance"
|
||||
@@ -92,7 +92,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'invert'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.invert"
|
||||
@@ -100,7 +100,7 @@
|
||||
sync
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'desaturate'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.desaturate"
|
||||
@@ -111,7 +111,7 @@
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend v-t="'filters'" />
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'threshold'"></label>
|
||||
<slider
|
||||
v-model="internalValue.threshold"
|
||||
@@ -120,7 +120,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label
|
||||
for="duotone"
|
||||
v-t="'duotone'"
|
||||
@@ -131,18 +131,20 @@
|
||||
sync
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--picker">
|
||||
<label></label>
|
||||
<color-picker
|
||||
id="duotoneColor1"
|
||||
color-type="HEXA"
|
||||
v-model="internalValue.duotone.color1"
|
||||
/>
|
||||
<color-picker
|
||||
id="duotoneColor2"
|
||||
color-type="HEXA"
|
||||
v-model="internalValue.duotone.color2"
|
||||
/>
|
||||
<div class="shared-inputs">
|
||||
<color-picker
|
||||
id="duotoneColor1"
|
||||
color-type="HEXA"
|
||||
v-model="internalValue.duotone.color1"
|
||||
/>
|
||||
<color-picker
|
||||
id="duotoneColor2"
|
||||
color-type="HEXA"
|
||||
v-model="internalValue.duotone.color2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
@@ -371,7 +373,7 @@ export default {
|
||||
:deep(.component__content) {
|
||||
@include mixins.boxSize();
|
||||
@include mixins.truncate();
|
||||
border-bottom: 1px solid colors.$color-lines;
|
||||
border-bottom: 1px solid colors.$color-lines-dark;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -34,11 +34,9 @@
|
||||
>{{ title }}</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="component__header-button button--ghost"
|
||||
class="component__header-button"
|
||||
@click="collapsed = !collapsed"
|
||||
>
|
||||
<img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
|
||||
</button>
|
||||
>{{ collapsed ? '+' : '-' }}</button>
|
||||
</div>
|
||||
<template v-if="!collapsed">
|
||||
<layer-effects
|
||||
@@ -62,7 +60,8 @@
|
||||
<div
|
||||
class="layer"
|
||||
:class="{
|
||||
'layer--active': element.index === activeLayerIndex
|
||||
'layer--active': element.index === activeLayerIndex,
|
||||
'layer--has-thumb': renderThumbnails,
|
||||
}"
|
||||
@contextmenu.stop.prevent="showContextMenu( $event, element )"
|
||||
>
|
||||
@@ -93,7 +92,7 @@
|
||||
v-tooltip.left="$t( element.maskSelected ? 'clickToEditLayer' : 'dblClickToRename')"
|
||||
class="layer__name"
|
||||
:class="{
|
||||
'layer--selected': element.index === activeLayerIndex && !element.maskSelected
|
||||
'layer--selected': element.index === activeLayerIndex && !element.maskSelected,
|
||||
}"
|
||||
@dblclick="handleLayerDoubleClick( element )"
|
||||
@click="handleLayerClick( element )"
|
||||
@@ -436,6 +435,7 @@ export default {
|
||||
@use "@/styles/_variables";
|
||||
@use "@/styles/panel";
|
||||
@use "@/styles/typography";
|
||||
@use "@/styles/ui";
|
||||
|
||||
.layer-panel-wrapper {
|
||||
@include panel.panel();
|
||||
@@ -464,9 +464,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.large() {
|
||||
.component__header-button {
|
||||
|
||||
.component__header-button {
|
||||
@include ui.closeButton();
|
||||
|
||||
@include mixins.large() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -480,11 +482,12 @@ export default {
|
||||
|
||||
.no-layers-text {
|
||||
padding: 0 variables.$spacing-medium;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.layer {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dotted colors.$color-lines;
|
||||
border-bottom: 1px solid colors.$color-lines-dark;
|
||||
padding: 0 variables.$spacing-xsmall;
|
||||
@include mixins.boxSize();
|
||||
@include typography.customFont();
|
||||
@@ -499,7 +502,6 @@ export default {
|
||||
&__thumbnail {
|
||||
width: 40px; // see thumbnail-cache.ts
|
||||
border: 1px solid colors.$color-lines;
|
||||
margin: variables.$spacing-xsmall;
|
||||
background: url( "../../assets-inline/images/document_transparent_bg.png" ) repeat;
|
||||
|
||||
img {
|
||||
@@ -511,28 +513,25 @@ export default {
|
||||
|
||||
&__name,
|
||||
&__name-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 3;
|
||||
@include mixins.truncate();
|
||||
font-size: 90%;
|
||||
padding: 0 variables.$spacing-small;
|
||||
margin-left: variables.$spacing-xsmall;
|
||||
padding: variables.$spacing-small 0;
|
||||
margin-left: variables.$spacing-small + variables.$spacing-xsmall;
|
||||
}
|
||||
|
||||
&__name-input {
|
||||
padding-top: 0;
|
||||
padding: variables.$spacing-xsmall;
|
||||
margin: variables.$spacing-xsmall 0 variables.$spacing-xsmall variables.$spacing-small;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: variables.$spacing-small;
|
||||
margin: variables.$spacing-xsmall variables.$spacing-xsmall 0 0;
|
||||
|
||||
&-button {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 32px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
filter: brightness(0) invert(0.5);
|
||||
|
||||
@@ -545,7 +544,7 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
width: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -568,6 +567,15 @@ export default {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&--has-thumb {
|
||||
padding: 0;
|
||||
|
||||
.layer__name {
|
||||
padding: variables.$spacing-small variables.$spacing-xsmall;
|
||||
margin: 0 variables.$spacing-small;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.mobile() {
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
|
||||
@@ -27,9 +27,11 @@
|
||||
<div class="toggle" @click="setMenuOpened( !menuOpened )">
|
||||
<span>☰</span>
|
||||
</div>
|
||||
<h1 class="heading">
|
||||
Bit<span class="emphasis">Mappery</span>
|
||||
</h1>
|
||||
<img
|
||||
class="logo"
|
||||
src="/assets/favicon/favicon-96x96.png"
|
||||
alt="BitMappery logo"
|
||||
/>
|
||||
<ul class="menu-list">
|
||||
<!-- file menu -->
|
||||
<li>
|
||||
@@ -410,6 +412,7 @@ import sharedMessages from "@/messages.json"; // for CloudServiceConnector
|
||||
import messages from "./messages.json";
|
||||
|
||||
export default {
|
||||
emits: [ "rescale" ],
|
||||
i18n: { messages, sharedMessages },
|
||||
mixins: [ CloudServiceConnector, ImageToDocumentManager ],
|
||||
components: {
|
||||
@@ -518,8 +521,9 @@ export default {
|
||||
setToggleButton( this.$refs.fullscreenBtn, isFullscreen => {
|
||||
this.isFullscreen = isFullscreen;
|
||||
// slight timeout as resize doesn't fire until full screen toggle is complete
|
||||
window.setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
getCanvasInstance()?.rescaleFn();
|
||||
this.$emit( "rescale" );
|
||||
}, 100 );
|
||||
});
|
||||
}
|
||||
@@ -617,13 +621,9 @@ export default {
|
||||
|
||||
$toggle-width: 50px;
|
||||
|
||||
.heading {
|
||||
@include typography.customFont();
|
||||
letter-spacing: variables.$spacing-xxsmall;
|
||||
|
||||
.emphasis {
|
||||
letter-spacing: math.div( variables.$spacing-xxsmall, 4 );
|
||||
}
|
||||
.logo {
|
||||
width: variables.$spacing-large;
|
||||
margin-right: variables.$spacing-medium;
|
||||
}
|
||||
|
||||
.menu {
|
||||
@@ -631,7 +631,6 @@ $toggle-width: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: variables.$spacing-small variables.$spacing-medium;
|
||||
width: 100%;
|
||||
height: variables.$menu-height;
|
||||
@@ -642,8 +641,7 @@ $toggle-width: 50px;
|
||||
@include mixins.large() {
|
||||
min-width: 100%;
|
||||
max-width: variables.$ideal-width;
|
||||
margin: 0 auto;
|
||||
padding-left: variables.$spacing-large;
|
||||
padding-left: variables.$spacing-xlarge;
|
||||
}
|
||||
|
||||
@include mixins.mobile() {
|
||||
@@ -671,7 +669,7 @@ $toggle-width: 50px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="requestLayerAdd()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'layerName'"></label>
|
||||
<input
|
||||
ref="nameInput"
|
||||
@@ -36,7 +36,7 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'layerType'"></label>
|
||||
<select-box
|
||||
:options="layerTypes"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="save()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'lowMemoryMode'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.lowMemory"
|
||||
@@ -35,7 +35,7 @@
|
||||
/>
|
||||
</div>
|
||||
<p v-t="'lowMemoryExpl'" class="expl"></p>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'layerThumbnails'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.thumbnails"
|
||||
@@ -43,7 +43,7 @@
|
||||
/>
|
||||
</div>
|
||||
<p v-t="'layerThumbnailsExpl'" class="expl"></p>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'autoAlias'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.autoAlias"
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
<p v-t="'autoAliasExpl'" class="expl"></p>
|
||||
<template v-if="hasWebAssembly">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'wasmFilters'"></label>
|
||||
<toggle-button
|
||||
v-model="internalValue.wasmFilters"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="resize()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'width'"></label>
|
||||
<input
|
||||
v-model.number="width"
|
||||
@@ -37,7 +37,7 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'height'"></label>
|
||||
<input
|
||||
v-model.number="height"
|
||||
@@ -46,7 +46,7 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'contentAlignment'"></label>
|
||||
<select-box :options="alignmentOptions"
|
||||
v-model="alignment"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="save()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'maintainAspectRatio'"></label>
|
||||
<toggle-button
|
||||
v-model="maintainRatio"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="requestLoad()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'availableSelections'"></label>
|
||||
<select-box
|
||||
:options="selections"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="requestSave()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'name'"></label>
|
||||
<input ref="nameInput"
|
||||
type="text"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="form" @keyup.enter="stroke()">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'strokeSize'"></label>
|
||||
<input
|
||||
ref="sizeInput"
|
||||
@@ -38,7 +38,7 @@
|
||||
class="input-field size-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--picker">
|
||||
<label v-t="'strokeColor'"></label>
|
||||
<color-picker
|
||||
v-model="color"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"en-US": {
|
||||
"toolOptions": "Tool options",
|
||||
"noToolOptions": "No active tool or active tool has no customizable options"
|
||||
"noToolOptions": "No tool selected or the currently selected tool has no customizable options."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="tool-option">
|
||||
<h3 v-t="'brush'"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'brushType'"></label>
|
||||
<select-box
|
||||
v-model="brushType"
|
||||
@@ -31,7 +31,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'brushSize'"></label>
|
||||
<slider
|
||||
v-model="brushSize"
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="hasThickness"
|
||||
class="wrapper slider"
|
||||
class="wrapper wrapper--slider"
|
||||
>
|
||||
<label v-t="'thickness'"></label>
|
||||
<slider
|
||||
@@ -53,7 +53,7 @@
|
||||
/>
|
||||
</div>
|
||||
<template v-if="canStroke">
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'strokeAmount'"></label>
|
||||
<slider
|
||||
v-model="strokes"
|
||||
@@ -62,7 +62,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'smoothing'"></label>
|
||||
<toggle-button
|
||||
v-model="smooth"
|
||||
@@ -71,7 +71,7 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'opacity'"></label>
|
||||
<slider
|
||||
v-model="opacity"
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="tool-option">
|
||||
<h3 v-t="'cloneBrush'"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'sourceLayer'"></label>
|
||||
<select-box
|
||||
v-model="sourceLayer"
|
||||
@@ -31,7 +31,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'brushSize'"></label>
|
||||
<slider
|
||||
v-model="brushSize"
|
||||
@@ -40,7 +40,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="wrapper slider">
|
||||
<!-- <div class="wrapper wrapper--slider">
|
||||
<label v-t="'thickness'"></label>
|
||||
<slider
|
||||
v-model="thickness"
|
||||
@@ -49,7 +49,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'opacity'"></label>
|
||||
<slider
|
||||
v-model="opacity"
|
||||
@@ -58,7 +58,7 @@
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper">
|
||||
<button
|
||||
v-t="'selectSourceCoordinate'"
|
||||
v-tooltip="'(Alt + Click)'"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
@focusout="handleBlur()"
|
||||
>
|
||||
<h3 v-t="isMask ? 'maskPosition' : 'layerPosition'"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'coordinates'"></label>
|
||||
<input
|
||||
type="number"
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="tool-option">
|
||||
<h3 v-t="'fill'"></h3>
|
||||
<div class="wrapper full slider">
|
||||
<div class="wrapper wrapper--toggle wrapper--full">
|
||||
<label v-t="'smartFill'"></label>
|
||||
<toggle-button
|
||||
v-model="smartFill"
|
||||
|
||||
@@ -33,11 +33,9 @@
|
||||
></h2>
|
||||
<button
|
||||
type="button"
|
||||
class="component__header-button button--ghost"
|
||||
class="component__header-button"
|
||||
@click="collapsed = !collapsed"
|
||||
>
|
||||
<img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
|
||||
</button>
|
||||
>{{ collapsed ? '+' : '-' }}</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="!collapsed"
|
||||
@@ -155,10 +153,12 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins";
|
||||
@use "@/styles/_variables";
|
||||
@use "@/styles/ui";
|
||||
@use "@/styles/panel";
|
||||
|
||||
.options-panel-wrapper {
|
||||
@include panel.panel();
|
||||
height: auto;
|
||||
|
||||
& {
|
||||
overflow: initial !important;
|
||||
@@ -174,7 +174,6 @@ export default {
|
||||
@include mixins.mobile() {
|
||||
position: fixed;
|
||||
bottom: panel.$collapsed-panel-height;
|
||||
height: 40%;
|
||||
|
||||
& {
|
||||
&.collapsed {
|
||||
@@ -184,7 +183,12 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.component__header-button {
|
||||
@include ui.closeButton();
|
||||
}
|
||||
|
||||
.no-tools-text {
|
||||
margin-top: variables.$spacing-small;
|
||||
font-size: 90%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="tool-option">
|
||||
<h3 v-t="'rotation'"></h3>
|
||||
<div class="wrapper full slider">
|
||||
<div class="wrapper wrapper--slider wrapper--full">
|
||||
<slider
|
||||
v-model="rotation"
|
||||
:min="min"
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div class="tool-option">
|
||||
<h3 v-t="'scale'"></h3>
|
||||
<div class="wrapper full slider">
|
||||
<div class="wrapper wrapper--slider wrapper--full">
|
||||
<slider
|
||||
v-model="scale"
|
||||
:min="min"
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<h3 v-t="'selection'"></h3>
|
||||
<p v-if="isLassoSelection" v-t="'lassoExpl'"></p>
|
||||
<template v-else>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--toggle">
|
||||
<label v-t="'lockRatio'" v-tooltip="$t('shiftKey')"></label>
|
||||
<toggle-button
|
||||
v-model="maintainRatio"
|
||||
@@ -38,7 +38,7 @@
|
||||
:disabled="!activeLayer"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'widthToHeight'"></label>
|
||||
<input
|
||||
type="number"
|
||||
@@ -54,8 +54,8 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<p v-t="'existingSelection'"></p>
|
||||
<div class="wrapper input">
|
||||
<h4 v-t="'existingSelection'"></h4>
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'coordinates'"></label>
|
||||
<input
|
||||
type="number"
|
||||
@@ -75,7 +75,7 @@
|
||||
/>
|
||||
</div>
|
||||
<template v-if="!isLassoSelection">
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--input">
|
||||
<label v-t="'dimensions'"></label>
|
||||
<input
|
||||
type="number"
|
||||
@@ -254,6 +254,7 @@ export default {
|
||||
|
||||
.half {
|
||||
width: 30% !important;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: variables.$spacing-small;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
{
|
||||
"en-US": {
|
||||
"text": "Text",
|
||||
"typeYourTextHere": "Type your text here",
|
||||
"font": "Font",
|
||||
"size": "Size",
|
||||
"lineHeight": "Line height",
|
||||
"letterSpacing": "Letter spacing",
|
||||
"color": "Color",
|
||||
"color": "Text color",
|
||||
"pixels": "Px",
|
||||
"points": "Pts",
|
||||
"millis": "Mm",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* The MIT License (MIT)
|
||||
*
|
||||
* Igor Zinken 2020-2025 - https://www.igorski.nl
|
||||
* Igor Zinken 2020-2026 - https://www.igorski.nl
|
||||
*
|
||||
* 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
|
||||
@@ -26,16 +26,17 @@
|
||||
@focusin="handleFocus"
|
||||
@focusout="handleBlur"
|
||||
>
|
||||
<div class="wrapper input">
|
||||
<h3 v-t="'text'"></h3>
|
||||
<div class="wrapper wrapper--textarea">
|
||||
<textarea
|
||||
ref="textInput"
|
||||
v-model="text"
|
||||
:placeholder="$t('typeYourTextHere')"
|
||||
:disabled="disabled"
|
||||
class="input-textarea full"
|
||||
class="input-textarea input-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'font'"></label>
|
||||
<vue-select
|
||||
v-model="font"
|
||||
@@ -50,9 +51,9 @@
|
||||
</template>
|
||||
</vue-select>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'size'"></label>
|
||||
<div class="wrapper shared-inputs">
|
||||
<div class="shared-inputs">
|
||||
<input
|
||||
v-model="size"
|
||||
class="input-field"
|
||||
@@ -66,7 +67,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'lineHeight'"></label>
|
||||
<slider
|
||||
v-model="lineHeight"
|
||||
@@ -76,7 +77,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper slider">
|
||||
<div class="wrapper wrapper--slider">
|
||||
<label v-t="'letterSpacing'"></label>
|
||||
<slider
|
||||
v-model="spacing"
|
||||
@@ -86,7 +87,7 @@
|
||||
:tooltip="'none'"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--picker">
|
||||
<label v-t="'color'"></label>
|
||||
<component
|
||||
:is="colorPicker"
|
||||
@@ -99,15 +100,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from "vue";
|
||||
<script lang="ts">
|
||||
import { defineAsyncComponent, type IAsyncComponent } from "vue";
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import VueSelect from "vue-select";
|
||||
import SelectBox from "@/components/ui/select-box/select-box.vue";
|
||||
import Slider from "@/components/ui/slider/slider.vue";
|
||||
import type { Layer } from "@/definitions/document";
|
||||
import { DEFAULT_LAYER_NAME, LayerTypes } from "@/definitions/layer-types";
|
||||
import FontPreview from "./font-preview/font-preview.vue";
|
||||
import { mapSelectOptions } from "@/utils/search-select-util";
|
||||
import { mapSelectOptions, type SelectOption } from "@/utils/search-select-util";
|
||||
import { enqueueState } from "@/factories/history-state-factory";
|
||||
import KeyboardService from "@/services/keyboard-service";
|
||||
import { fontsConsented, consentFonts, rejectFonts } from "@/services/font-service";
|
||||
@@ -136,22 +138,22 @@ export default {
|
||||
"activeLayerIndex",
|
||||
"activeLayer",
|
||||
]),
|
||||
disabled() {
|
||||
disabled(): boolean {
|
||||
return this.activeLayer?.type !== LayerTypes.LAYER_TEXT;
|
||||
},
|
||||
canSearchFonts() {
|
||||
canSearchFonts(): boolean {
|
||||
return !isMobile(); // only show preview list on mobile
|
||||
},
|
||||
colorPicker() {
|
||||
colorPicker(): IAsyncComponent {
|
||||
// load async as this adds to the bundle size
|
||||
return defineAsyncComponent({
|
||||
loader: () => import( "@/components/ui/color-picker/color-picker.vue" )
|
||||
});
|
||||
},
|
||||
fonts() {
|
||||
fonts(): SelectOption[] {
|
||||
return mapSelectOptions( [ ...googleFonts ].sort() );
|
||||
},
|
||||
unitOptions() {
|
||||
unitOptions(): { label: string, value: string }[] {
|
||||
return [
|
||||
{ label: this.$t( "pixels" ), value: "px" },
|
||||
{ label: this.$t( "points" ), value: "pt" },
|
||||
@@ -160,10 +162,10 @@ export default {
|
||||
];
|
||||
},
|
||||
text: {
|
||||
get() {
|
||||
get(): string {
|
||||
return this.internalText;
|
||||
},
|
||||
set( value ) {
|
||||
set( value: string ): void {
|
||||
this.internalText = value;
|
||||
// debounce the model update (and subsequent text render)
|
||||
// to not update on each entered character
|
||||
@@ -178,10 +180,10 @@ export default {
|
||||
}
|
||||
},
|
||||
size: {
|
||||
get() {
|
||||
get(): number {
|
||||
return this.activeLayer?.text?.size;
|
||||
},
|
||||
set( size ) {
|
||||
set( size: string | number ): void {
|
||||
size = parseFloat( size );
|
||||
if ( isNaN( size )) {
|
||||
return;
|
||||
@@ -191,42 +193,42 @@ export default {
|
||||
}
|
||||
},
|
||||
unit: {
|
||||
get() {
|
||||
get(): string {
|
||||
return this.activeLayer?.text?.unit;
|
||||
},
|
||||
set( unit ) {
|
||||
set( unit: string ): void {
|
||||
this.update({ unit }, "unit" );
|
||||
},
|
||||
},
|
||||
lineHeight: {
|
||||
get() {
|
||||
get(): number {
|
||||
return this.activeLayer?.text?.lineHeight;
|
||||
},
|
||||
set( lineHeight ) {
|
||||
set( lineHeight: number ): void {
|
||||
this.update({ lineHeight }, "lineHeight" );
|
||||
}
|
||||
},
|
||||
spacing: {
|
||||
get() {
|
||||
get(): number {
|
||||
return this.activeLayer?.text?.spacing;
|
||||
},
|
||||
set( spacing ) {
|
||||
set( spacing: number ): void {
|
||||
this.update({ spacing }, "spacing" );
|
||||
}
|
||||
},
|
||||
color: {
|
||||
get() {
|
||||
get(): string {
|
||||
return this.activeLayer?.text?.color;
|
||||
},
|
||||
set( color ) {
|
||||
set( color: string ): void {
|
||||
this.update({ color }, "color" );
|
||||
}
|
||||
},
|
||||
font: {
|
||||
get() {
|
||||
get(): string {
|
||||
return this.activeLayer?.text?.font;
|
||||
},
|
||||
set({ value } ) {
|
||||
set({ value }: { value: string }): void {
|
||||
this.update({ font: value }, "font" );
|
||||
}
|
||||
}
|
||||
@@ -234,7 +236,7 @@ export default {
|
||||
watch: {
|
||||
activeLayer: {
|
||||
immediate: true,
|
||||
handler( layer ) {
|
||||
handler( layer: Layer ): void {
|
||||
if ( layer && this.layerId !== layer.id ) {
|
||||
this.internalText = layer.text?.value;
|
||||
this.syncText = this.internalText === layer.name || layer.name === DEFAULT_LAYER_NAME;
|
||||
@@ -243,7 +245,7 @@ export default {
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted(): void {
|
||||
if ( !fontsConsented() ) {
|
||||
this.openDialog({
|
||||
type: "confirm",
|
||||
@@ -261,7 +263,7 @@ export default {
|
||||
focus( this.$refs.textInput );
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
unmounted(): void {
|
||||
this.handleBlur();
|
||||
},
|
||||
methods: {
|
||||
@@ -270,13 +272,13 @@ export default {
|
||||
"setActiveTool",
|
||||
"updateLayer",
|
||||
]),
|
||||
handleFocus() {
|
||||
handleFocus(): void {
|
||||
KeyboardService.setSuspended( true );
|
||||
},
|
||||
handleBlur() {
|
||||
handleBlur(): void {
|
||||
KeyboardService.setSuspended( false );
|
||||
},
|
||||
update( textOpts = {}, propName = "text" ) {
|
||||
update( textOpts = {}, propName = "text" ): void {
|
||||
if ( !this.activeLayer ) {
|
||||
return;
|
||||
}
|
||||
@@ -324,12 +326,6 @@ export default {
|
||||
@use "@/styles/form";
|
||||
@use "@/styles/tool-option";
|
||||
|
||||
.color-picker {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
transform: translateY(-(variables.$spacing-xsmall));
|
||||
}
|
||||
|
||||
.font-selector {
|
||||
display: inline-block;
|
||||
width: form.$inputWidth;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
>
|
||||
<h3 v-t="'magicWand'"></h3>
|
||||
<p v-t="'wandDescr'"></p>
|
||||
<div class="wrapper full slider">
|
||||
<div class="wrapper wrapper--toggle wrapper--full">
|
||||
<label v-t="'sampleMerged'"></label>
|
||||
<toggle-button
|
||||
v-model="sampleMerged"
|
||||
@@ -37,7 +37,7 @@
|
||||
:disabled="!activeLayer"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper full input">
|
||||
<div class="wrapper wrapper--input wrapper--full">
|
||||
<label v-t="'threshold'"></label>
|
||||
<input
|
||||
type="number"
|
||||
|
||||
@@ -31,11 +31,9 @@
|
||||
></h2>
|
||||
<button
|
||||
type="button"
|
||||
class="component__header-button button--ghost"
|
||||
class="component__header-button"
|
||||
@click="collapsed = !collapsed"
|
||||
>
|
||||
<img :src="`assets/images/icon-${collapsed ? 'expand' : 'collapse'}.svg`" />
|
||||
</button>
|
||||
>{{ collapsed ? '+' : '-' }}</button>
|
||||
</div>
|
||||
<!-- click.stop.prevent is to prevent document scroll on double tap on iOS -->
|
||||
<div
|
||||
@@ -288,6 +286,7 @@ export default {
|
||||
@use "@/styles/_variables";
|
||||
@use "@/styles/component";
|
||||
@use "@/styles/typography";
|
||||
@use "@/styles/ui";
|
||||
|
||||
$toolButtonWidth: variables.$spacing-large;
|
||||
|
||||
@@ -297,19 +296,14 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
@include mixins.large() {
|
||||
.component__content {
|
||||
margin-right: -(variables.$spacing-small);
|
||||
padding: variables.$spacing-small + variables.$spacing-xsmall;
|
||||
padding: variables.$spacing-small variables.$spacing-small;
|
||||
}
|
||||
|
||||
.component__header-button {
|
||||
top: variables.$spacing-small - variables.$spacing-xxsmall;
|
||||
right: variables.$spacing-xxsmall;
|
||||
width: 36px;
|
||||
height: 29px;
|
||||
|
||||
img {
|
||||
width: variables.$spacing-medium + variables.$spacing-small;
|
||||
height: variables.$spacing-medium + variables.$spacing-small;
|
||||
}
|
||||
@include ui.closeButton();
|
||||
top: variables.$spacing-small;
|
||||
right: variables.$spacing-small;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&--docked {
|
||||
@@ -358,7 +352,7 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
|
||||
@media screen and (min-height: 880px) {
|
||||
@include mixins.large() {
|
||||
width: 60px !important;
|
||||
width: 52px !important;
|
||||
}
|
||||
|
||||
.component__title {
|
||||
@@ -367,7 +361,7 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
|
||||
.component__header-button {
|
||||
top: variables.$spacing-small;
|
||||
right: #{variables.$spacing-medium - variables.$spacing-xsmall};
|
||||
right: #{variables.$spacing-medium - variables.$spacing-xxsmall} !important;
|
||||
}
|
||||
|
||||
.color-panel {
|
||||
@@ -383,7 +377,6 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
|
||||
.tool-button {
|
||||
cursor: pointer;
|
||||
border-radius: variables.$spacing-xsmall;
|
||||
border: none;
|
||||
padding: variables.$spacing-xxsmall variables.$spacing-xsmall;
|
||||
font-weight: bold;
|
||||
@@ -409,13 +402,13 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #333;
|
||||
background-color: transparent;
|
||||
color: colors.$color-bg;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@include mixins.large() {
|
||||
margin: 0 variables.$spacing-small variables.$spacing-small 0;
|
||||
margin: 0 variables.$spacing-xsmall variables.$spacing-xsmall 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -458,5 +451,4 @@ $toolButtonWidth: variables.$spacing-large;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 v-t="'dimensions'" class="title"></h3>
|
||||
<div class="wrapper input">
|
||||
<div class="wrapper wrapper--select">
|
||||
<label v-t="'unit'"></label>
|
||||
<div class="select-combo">
|
||||
<select-box
|
||||
@@ -38,7 +38,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper input wrapper--small">
|
||||
<div class="wrapper wrapper--input wrapper--small">
|
||||
<label v-t="'width'"></label>
|
||||
<input
|
||||
v-model.number="translatedWidth"
|
||||
@@ -49,7 +49,7 @@
|
||||
class="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="wrapper input wrapper--small">
|
||||
<div class="wrapper wrapper--input wrapper--small">
|
||||
<label v-t="'height'"></label>
|
||||
<input
|
||||
v-model.number="translatedHeight"
|
||||
|
||||
@@ -106,13 +106,21 @@ $dropdownHeight: variables.$spacing-xlarge;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.vs__actions {
|
||||
padding: 0;
|
||||
margin-right: variables.$spacing-small;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
margin: variables.$spacing-xsmall variables.$spacing-small;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.vs__selected-options {
|
||||
height: $dropdownHeight;
|
||||
@include mixins.truncate();
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
<template>
|
||||
<div class="slider-input">
|
||||
<div class="input-slider">
|
||||
<input
|
||||
v-if="!textInput"
|
||||
v-model.number="internalValue"
|
||||
|
||||
@@ -8,3 +8,4 @@ $color-bg-light: #383838;
|
||||
$color-window-bg: linear-gradient(to bottom, $color-bg-dark 35%, $color-bg-light 90%);
|
||||
$color-text: #e6e6e6;
|
||||
$color-lines: #b6b6b6;
|
||||
$color-lines-dark: #484848;
|
||||
|
||||
@@ -56,7 +56,8 @@ html, body {
|
||||
|
||||
@include mixins.large() {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
width: variables.$spacing-small;
|
||||
height: variables.$spacing-small;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
@@ -65,7 +66,7 @@ html, body {
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: variables.$spacing-medium;
|
||||
// border-radius: variables.$spacing-medium;
|
||||
background-color: colors.$color-bg;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,37 +8,54 @@ $inputWidth: 65%;
|
||||
|
||||
.form {
|
||||
.wrapper {
|
||||
margin: variables.$spacing-small 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: variables.$spacing-xsmall 0;
|
||||
|
||||
// we can have modifiers per input element type, e.g :
|
||||
// &--input,
|
||||
// &--textarea,
|
||||
// &--picker,
|
||||
// &--select,
|
||||
// &--slider,
|
||||
// &--toggle {
|
||||
// // style here
|
||||
// }
|
||||
|
||||
&--textarea,
|
||||
&--toggle,
|
||||
&--select {
|
||||
margin-bottom: variables.$spacing-small;
|
||||
}
|
||||
|
||||
// use where there is no <label> element
|
||||
&.full {
|
||||
&--full {
|
||||
width: 200%;
|
||||
margin-left: variables.$spacing-xsmall;
|
||||
|
||||
&.slider .slider-input {
|
||||
.input-slider {
|
||||
width: 48% !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
width: $labelWidth;
|
||||
}
|
||||
|
||||
.input-suffix {
|
||||
margin-left: variables.$spacing-small;
|
||||
}
|
||||
|
||||
.input-field,
|
||||
.input-textarea,
|
||||
.slider-input,
|
||||
.form-element {
|
||||
display: inline-block;
|
||||
.input-slider {
|
||||
width: $inputWidth;
|
||||
}
|
||||
.color-picker {
|
||||
display: inline-block;
|
||||
margin: variables.$spacing-xsmall;
|
||||
}
|
||||
.slider-input {
|
||||
.input-slider {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.input-field {
|
||||
margin: 0 0 variables.$spacing-xsmall;
|
||||
}
|
||||
.input-field,
|
||||
.input-textarea {
|
||||
box-sizing: border-box;
|
||||
@@ -49,22 +66,21 @@ $inputWidth: 65%;
|
||||
@include typography.bodyFont();
|
||||
}
|
||||
|
||||
.full {
|
||||
.input-full {
|
||||
width: 100%; // when elements have no label
|
||||
}
|
||||
|
||||
// when there are multiple inputs within a single wrapper
|
||||
// this is a wrapper following the <label> element
|
||||
.shared-inputs {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
width: $inputWidth;
|
||||
justify-content: space-around;
|
||||
gap: variables.$spacing-small;
|
||||
margin: 0;
|
||||
|
||||
.input-field,
|
||||
.input-textarea,
|
||||
.slider-input,
|
||||
.select-box-wrapper,
|
||||
.form-element {
|
||||
.input-slider,
|
||||
.select-box-wrapper {
|
||||
width: 76px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ $collapsed-panel-height: 40px; // mobile view
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.component__content) {
|
||||
padding: variables.$spacing-small variables.$spacing-medium variables.$spacing-medium;
|
||||
padding: variables.$spacing-xsmall variables.$spacing-medium variables.$spacing-small;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -30,10 +30,9 @@ $collapsed-panel-height: 40px; // mobile view
|
||||
|
||||
// overrides component mixin
|
||||
:deep(.component__header-button) {
|
||||
top: variables.$spacing-small - variables.$spacing-xxsmall;
|
||||
right: variables.$spacing-small;
|
||||
width: 36px;
|
||||
height: 29px;
|
||||
top: variables.$spacing-small;
|
||||
right: variables.$spacing-medium;
|
||||
width: 24px;
|
||||
|
||||
img {
|
||||
width: variables.$spacing-medium + variables.$spacing-small;
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
h3 {
|
||||
h3, h4 {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
label {
|
||||
p, label {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
@@ -32,13 +32,6 @@
|
||||
right: (variables.$spacing-xlarge + variables.$spacing-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: variables.$spacing-medium;
|
||||
right: variables.$spacing-large;
|
||||
@include closeButton();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -91,14 +84,14 @@
|
||||
@mixin closeButton() {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: colors.$color-lines;
|
||||
border: 2px solid colors.$color-lines;
|
||||
color: #6a6a6a;
|
||||
border: 1.5px solid colors.$color-lines-dark;
|
||||
border-radius: 5px;
|
||||
padding: variables.$spacing-xxsmall #{variables.$spacing-xsmall + variables.$spacing-xxsmall};
|
||||
|
||||
&:hover {
|
||||
color: colors.$color-4;
|
||||
border-color: colors.$color-4;
|
||||
color: #fff;
|
||||
border-color: colors.$color-lines;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -248,6 +241,7 @@
|
||||
|
||||
.submenu {
|
||||
list-style: none;
|
||||
margin-top: variables.$spacing-small;
|
||||
|
||||
li {
|
||||
padding: variables.$spacing-small 0;
|
||||
@@ -255,7 +249,7 @@
|
||||
@include mixins.large() {
|
||||
display: block;
|
||||
color: #b6b6b6;
|
||||
padding: variables.$spacing-xsmall variables.$spacing-small;
|
||||
padding: variables.$spacing-xxsmall variables.$spacing-small;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
@@ -266,7 +260,7 @@
|
||||
@include mixins.large() {
|
||||
position: absolute;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.5);
|
||||
padding: variables.$spacing-medium;
|
||||
padding: variables.$spacing-medium variables.$spacing-small;
|
||||
background-image: colors.$color-window-bg;
|
||||
background-repeat: repeat-x;
|
||||
@include mixins.boxSize();
|
||||
|
||||
Reference in New Issue
Block a user