Cleanup code and add input readonly style

3 files changed, 55 insertions, 8 deletions

diff --git a/src/carousels.less b/src/carousels.less
index 8b01e94..ee30edf 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -2,7 +2,6 @@
 .carousel {
   background: @bg-color;
   display: block;
-  height: 50vh;
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -11,6 +10,11 @@
     height: 100%;
     left: 0;
     position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
 
     .carousel-item {
       animation: carousel-slideout 1s ease-in-out 1;
@@ -97,12 +101,6 @@
       }
     }
   }
-
-  &.carousel-autoplay {
-    .carousel-item {
-      //animation: carousel-autoplay .15s infinite;
-    }
-  }
 }
 
 @keyframes carousel-slidein {
diff --git a/src/forms.less b/src/forms.less
index fe08dc7..2255574 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -362,7 +362,7 @@
   }
 }
 
-// Form disabled
+// Form disabled and readonly
 .form-input,
 .form-select {
   &:disabled,
@@ -373,6 +373,12 @@
   }
 }
 
+.form-input {
+  &[readonly] {
+    background-color: @bg-color;
+  }
+}
+
 input {
   &:disabled,
   &.disabled {
diff --git a/src/icons.less b/src/icons.less
index edcc159..ce13756 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -554,6 +554,49 @@
   }
 }
 
+// Icon location
+.icon-location {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    content: "";
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.15em, .17em -.15em;
+    content: "";
+    height: .1em;
+    width: .1em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}
+
 // Component icon support
 .btn,
 .toast,