adamwhitlock1

// styles for a 'process list' component, but with complete/incomplete styles
.va-conditional-process-list {
  display: block;
  list-style-type: decimal;
  list-style-position: outside;
  line-height: 1.5;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;

adamwhitlock1

<template>
  <div>
    <styled-button
      :color="dynColor"
      :br="dynBr + 'px'"
      :pad="dynPad + 'px'"
      :bgc="dynBgc"
      @click="alertButton"
    >I am a dynamically styled button. Change the fields below!</styled-button>

adamwhitlock1

import styled from "vue-styled-components";
const buttonProps = { color: String, br: String, pad: String, bgc: String };

export const StyledButton = styled("button", buttonProps)`
  color: ${props => props.color};
  border-radius: ${props => props.br};
  padding: ${props => props.pad};
  background-color: ${props => props.bgc};
  letter-spacing: 1px;
`;

adamwhitlock1

$replacements = ['yeet1', 'yeet2', 'yeet3', 'yeet4', 'yeet5', 'yeet6', 'yeet7', 'yeet8', 'yeet9', 'yeet10'];

$source = "At Indiegogo you'll find a welcoming , <adjective> <noun> that embraces
collaboration , fearlessness and authenticity . We are a rapidly <verb_ending_with_ing>
organization and our platform is used by people all over the world to <verb> <noun> for
their creative , cause-related , or entrepreneurial ideas . Our customers are passionate
about their funding campaigns , and so are we ! We are a team of <adjective> ,
results-driven , team-players who are lucky <adjective> to be able to <verb> “helping
people achieve their dream” work . We love our dogs , good <noun> , coffee , and post-it
notes ! Lots of <noun> notes !";