Add Textbox Repeater component

2026-06-03 03:12:14 +00:00 · 2015-11-08 15:57:50 -08:00
parent 97d5dc048b
commit c9cd162903
1 changed files with 55 additions and 0 deletions
@@ -0,0 +1,55 @@
+.textbox-repeater {
+
+  &__button-group {
+    margin-top: -8px;
+    position: absolute;
+    right: -8px;
+    top: 50%;
+  }
+
+  &__button {
+    background: $textbox-repeater--button--background;
+    border: none;
+    border-radius: 16px;
+    box-shadow: 0 0 0 1px $textbox-repeater--button--border;
+    cursor: pointer;
+    height: 16px;
+    outline: none;
+    margin-right: 8px;
+    padding: 0;
+    position: relative;
+    transition: background 0.25s, box-shadow 0.25s;
+    width: 16px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      background: $textbox-repeater--button--background--hover;
+      box-shadow: 0 0 0 1px $textbox-repeater--button--border--hover;
+
+      .icon {
+        fill: $textbox-repeater--button--foreground--hover;
+      }
+    }
+
+    .icon {
+      height: 8px;
+      fill: $textbox-repeater--button--foreground;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transition: fill 0.25s;
+      transform: translate(-50%, -50%);
+      width: 8px;
+    }
+  }
+
+  .textbox {
+
+    &__wrapper {
+      position: relative;
+    }
+  }
+}