Tidyup
This commit is contained in:
parent
0972e0a121
commit
f6466711de
|
@ -1,7 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, beforeUpdate } from "svelte"
|
import { onMount, beforeUpdate } from "svelte"
|
||||||
//Create utilities and move this in
|
import {buildStyle} from "../../helpers.js"
|
||||||
import { buildStyle } from "../../../../standard-components/src/buildStyle.js"
|
|
||||||
export let options = []
|
export let options = []
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let styleBindingProperty
|
export let styleBindingProperty
|
||||||
|
@ -73,8 +72,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$: menuStyle = buildStyle({
|
$: menuStyle = buildStyle({
|
||||||
maxHeight,
|
"max-height": maxHeight,
|
||||||
transformOrigin: `center ${positionSide}`,
|
"transform-origin": `center ${positionSide}`,
|
||||||
[positionSide]: "32px",
|
[positionSide]: "32px",
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -142,8 +141,7 @@
|
||||||
.bb-select-container {
|
.bb-select-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
outline: none;
|
outline: none;
|
||||||
margin: 5px;
|
width: 189px;
|
||||||
width: 164px;
|
|
||||||
height: 32px;
|
height: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -160,11 +158,16 @@
|
||||||
.bb-select-anchor > span {
|
.bb-select-anchor > span {
|
||||||
color: #565a66;
|
color: #565a66;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
flex: 1;
|
width: 145px;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bb-select-anchor > i {
|
.bb-select-anchor > i {
|
||||||
flex: 0 0 20px;
|
transition: transform 0.13s ease;
|
||||||
|
transform-origin: center;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
|
@ -178,7 +181,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 164px;
|
width: 189px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: #808192;
|
color: #808192;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -211,8 +214,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
li:hover {
|
||||||
transition: transform 0.13s ease;
|
background-color:#e6e6e6
|
||||||
transform-origin: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||||
import Colorpicker from "../common/Colorpicker.svelte"
|
import Colorpicker from "../common/Colorpicker.svelte"
|
||||||
import { excludeProps } from "./propertyCategories.js"
|
import { excludeProps } from "./propertyCategories.js"
|
||||||
import OptionSelectNew from "./OptionSelectNew.svelte"
|
|
||||||
|
|
||||||
export let panelDefinition = []
|
export let panelDefinition = []
|
||||||
export let componentDefinition = {}
|
export let componentDefinition = {}
|
||||||
|
@ -17,9 +16,6 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<OptionSelectNew
|
|
||||||
options={['arial enjfhewhfhw iejfiewj ewfnew', 'comicsans', 'tachoma', 'bla']} />
|
|
||||||
|
|
||||||
{#if panelDefinition.length > 0}
|
{#if panelDefinition.length > 0}
|
||||||
{#each panelDefinition as definition}
|
{#each panelDefinition as definition}
|
||||||
{#if propExistsOnComponentDef(definition.key)}
|
{#if propExistsOnComponentDef(definition.key)}
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
export const buildStyle = styles => {
|
||||||
|
let str = ""
|
||||||
|
for (let s in styles) {
|
||||||
|
if (styles[s]) {
|
||||||
|
str += `${s}: ${styles[s]}; `
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
|
export const convertCamel = str => {
|
||||||
|
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
|
||||||
|
}
|
Loading…
Reference in New Issue