Prettied up style-demo a bit. Added html for labelled-input.
<link rel="stylesheet" href="./skin/current/config.css" />
<!-- link rel="icon" type="image/png" href="images/won-icons/won-icon64.png" / -->
<link rel="icon" type="image/png" href="skin/current/images/logo.png">
+
+ <style>
+ main {
+ /* overwrite normal height:100% */
+ height: auto;
+
+ display: grid;
+ grid-row-gap: 2rem;
+ justify-items: center;
+ padding-top: 2rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-bottom: 2rem;
+ }
+
+ main>section {
+ width: 25rem;
+ }
+
+ pre {
+ background-color: var(--won-light-gray);
+ border: 1px solid var(--won-line-gray);
+ padding: 0.5rem;
+ }
+
+ h2 {
+ /* margin-top: 3rem; */
+ }
+ </style>
</head>
<body>
- <section ui-view="" class="ng-scope">
+ <section ui-view="" class="ng-scope" style="background-color: white">
<header class="ng-scope">
<won-topnav class="ng-isolate-scope">
<nav class="topnav hide-in-responsive" ng-class="{'hide-in-responsive': !self.isPostView &amp;&amp; self.connectionOrPostDetailOpen}">
</nav>
</won-topnav>
</header>
- <main class="connectionscontent ng-scope" style="background-color: white">
+ <main>
+
<section>
<h2>Filled Button</h2>
<code><pre>
&lt;a class="won-button--filled red" href="#"&gt;
Demo Button
- &lt;/a&gt;
- </pre></code>
+&lt;/a&gt;</pre></code>
</p>
<a class="won-button--filled red" href="#">
Demo Button
</a>
</section>
+
+
+
+ <section>
+ <h2>Labelled Textfield with Icon</h2>
+ <p>Use like:</p>
+ <p>
+ <code><pre>
+&lt;div class="labelled-input"&gt;
+ &lt;label for="lli__input"&gt;My Label&lt;/label&gt;
+ &lt;input
+ type="text" name="lli__input"
+ class="lli__input"
+ placeholder="e.g. some examples"/&gt;
+ &lt;svg
+ class="lli__icon clickable"
+ style="--local-primary:var(--won-primary-color);"&gt;
+ &lt;use
+ xlink:href="#ico36_close"
+ href="#ico36_close"&gt;
+ &lt;/use&gt;
+ &lt;/svg&gt;
+&lt;/div&gt;</pre></code>
+ </p>
+ <div class="labelled-input">
+ <label for="lli__input">My Label</label>
+ <input type="text" name="lli__input" class="lli__input" placeholder="e.g. some examples" />
+ <!-- ng-class="{'lp__searchbox__inner - - withreset' : self.showResetButton}"/> -->
+ <svg class="lli__icon clickable" style="--local-primary:var(--won-primary-color);">
+ <use xlink:href="#ico36_close" href="#ico36_close"></use>
+ </svg>
+ </div>
+ </section>
+
+
+
+
</main>
</section>
+
<!-- start loading the svg so it's already in the cache once angular has finished loading its templates -->
<img src="./generated/symbol/svg/sprite.symbol.svg" style="display:none">
<script>
