bootstrap-vue · tmorehouse · Apr 13, 2020 · Apr 11, 2020 · Apr 11, 2020 · Apr 11, 2020
diff --git a/src/components/form-rating/README.md b/src/components/form-rating/README.md
diff --git a/src/components/form-rating/_form-rating.scss b/src/components/form-rating/_form-rating.scss
@@ -0,0 +1,56 @@
+.b-rating {
+  text-align: center;
+
+  &.d-inline-flex {
+    width: auto;
+  }
+
+  .b-rating-star,
+  .b-rating-value {
+    padding: 0 0.25em;
+  }
+
+  .b-rating-value {
+    // Keep the stars from moving when value changes (usually)
+    min-width: 2.5em;
+  }
+
+  .b-rating-star {
+    display: inline-flex;
+    justify-content: center;
+
+    .b-rating-icon {
+      display: inline-flex;
+      transition: all 0.15s ease-in-out;
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: $input-disabled-bg;
+    color: $text-muted;
+  }
+
+  &:not(.disabled):not(.readonly) {
+    .b-rating-star {
+      cursor: pointer;
+    }
+
+    // Zoom focused or hovered icons
+    &:focus:not(:hover) .b-rating-star.focused,
+    .b-rating-star:hover {
+      .b-rating-icon {
+        transform: scale(1.5);
+      }
+    }
+  }
+
+  // Flip the half icon if RTL mode
+  // We transform the outer star wrapper so that we do not
+  // interfere with the hover/focus transform above
+  &[dir="rtl"] {
+    .b-rating-star-half {
+      transform: scale(-1, 1);
+    }
+  }
+}