This commit is contained in:
Conor_Mack 2020-05-29 10:45:19 +01:00
parent 73223debe9
commit a9a0a35c5a
3 changed files with 27 additions and 16 deletions

View File

@ -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>

View File

@ -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)}

View File

@ -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()}`)
}