Add a label to cron copy input

rautio · Nov 5, 2023 · bc920d4 · bc920d4
1 parent 2ee06f6
commit bc920d4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/demo/src/cron-editor.css b/demo/src/cron-editor.css
@@ -38,15 +38,17 @@
   line-height: 4rem;
   width: 100%;
 }
+
 .user-input::part(form-control-label) {
   color: #a3a3a3;
   float: left;
   font-size: 0.9rem;
 }
 
-.copy-container {
-  margin-top: 2rem;
+.cron-container {
+  margin-top: 1rem;
   display: inline-flex;
+  align-items: end;
 }
 
 .cron-input::part(input) {
@@ -60,11 +62,16 @@
   width: 300px;
 }
 
+.cron-input::part(form-control-label) {
+  color: #a3a3a3;
+  float: left;
+  font-size: 0.9rem;
+}
+
 .copy-button::part(button) {
   background: #202020;
   width: 4rem;
-  text-align: center;
-  height: 100%;
+  height: 40px;
 }
 
 .copy-button::part(copy-icon) {

diff --git a/demo/src/cron-editor.ts b/demo/src/cron-editor.ts
@@ -29,14 +29,15 @@ export class App extends LitElement {
     return html` <div class="container">
       <sl-input
         class="user-input"
-        label="Type a schedule."
+        label="Type a schedule"
         value="Every minute"
         @sl-input="${this.handleUserInput}"
       ></sl-input>
-      <div class="copy-container">
+      <div class="cron-container">
         <sl-input
           class="cron-input"
           id="cron-input"
+          label="Cron schedule"
           readonly
           value=${cron}
           style="display:inline-block;"