Merge pull request #160 from picturepan2/feature/0.2.8 v0.2.8

Feature/0.2.8

11 files changed, 139 insertions, 47 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index ce8b620..e392581 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -29,4 +29,11 @@
     font-size: 1;
     padding: .1em 0;
   }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
 }
diff --git a/src/avatars.less b/src/avatars.less
index 8eb9e5e..88933b6 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -2,7 +2,7 @@
 .avatar {
   background: @primary-color;
   border-radius: 50%;
-  color: @light-color;
+  color: fade(@light-color, 75%);
   display: inline-block;
   font-size: 1.4rem;
   font-weight: 300;
diff --git a/src/base.less b/src/base.less
index 904cb5d..3c80b1c 100644
--- a/src/base.less
+++ b/src/base.less
@@ -40,14 +40,6 @@ a {
   outline: 0;
 }
 
-// Disabled state
-&[disabled],
-.disabled {
-  cursor: default;
-  opacity: .5;
-  pointer-events: none;
-}
-
 // Icons
 .btn,
 .toast,
diff --git a/src/buttons.less b/src/buttons.less
index 6ae9e5f..5e6fcb8 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -33,6 +33,13 @@
     border-color: darken(@dark-primary-color, 5%);
     color: @light-color;
   }
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: .5;
+    pointer-events: none;
+  }
 
   // Button Primary
   &.btn-primary {
diff --git a/src/calendars.less b/src/calendars.less
index 0a1fc42..9494558 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -40,18 +40,18 @@
 
     .calendar-date {
       border: 0;
-      overflow: hidden;
-      padding: .5rem;
+      padding: .6rem;
 
       .date-item {
         color: @dark-gray-color;
       }
 
-      &.prev-month,
-      &.next-month {
-        .date-item {
-          opacity: .25;
-        }
+      &.prev-month .date-item,
+      &.next-month .date-item,
+      .date-item:disabled {
+        cursor: default;
+        opacity: .25;
+        pointer-events: none;
       }
     }
 
@@ -142,8 +142,11 @@
       .calendar-date {
         border-bottom: .1rem solid @border-color;
         border-right: .1rem solid @border-color;
-        height: 10rem;
-        text-align: right;
+        display: flex;
+        flex-direction: column;
+        height: 11rem;
+        overflow: hidden;
+        padding: 0;
 
         &:nth-child(7n) {
           border-right: 0;
@@ -154,14 +157,18 @@
       }
 
       .date-item {
+        align-self: flex-end;
+        flex: 0 0 2.4rem;
         height: 2.4rem;
+        margin-right: .5rem;
+        margin-top: .5rem;
         padding: .1rem;
         width: 2.4rem;
 
         &.badge {
           &::after {
-            top: .25rem;
-            right: .25rem;
+            top: .2rem;
+            right: .2rem;
           }
         }
       }
@@ -194,16 +201,25 @@
       }
     }
 
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: .5rem;
+    }
+
     .calendar-event {
       background: @secondary-color;
+      border-radius: @border-radius;
       color: @primary-color;
-      display: block;
       font-size: 1.2rem;
-      .label-base();
+      display: block;
       margin: .2rem auto;
       overflow: hidden;
+      padding: .3rem .4rem;
       text-align: left;
       text-overflow: ellipsis;
+      vertical-align: baseline;
       white-space: nowrap;
     }
   }
diff --git a/src/carousels.less b/src/carousels.less
index e826840..99b0a9c 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -11,7 +11,6 @@
     height: 100%;
     left: 0;
     position: relative;
-    //animation: carousel-autoplay 15s infinite;
 
     .carousel-item {
       animation: carousel-slideout 1s 1;
@@ -22,12 +21,36 @@
       position: absolute;
       top: 0;
       width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: fade(@light-gray-color, 25%);
+      border-color: fade(@light-gray-color, 50%);
+      color: @light-gray-color;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s ease;
+      transform: translateY(-50%);
+      z-index: 99;
+    }
+    .item-prev {
+      left: 2rem;
+    }
+    .item-next {
+      right: 2rem;
     }
   }
 
   .carousel-locator {
-    display: none;
-
     &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
     &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
@@ -74,6 +97,12 @@
       }
     }
   }
+
+  &.carousel-autoplay {
+    .carousel-item {
+      //animation: carousel-autoplay .15s infinite;
+    }
+  }
 }
 
 @supports (object-fit: cover) {
@@ -86,23 +115,6 @@
   }
 }
 
-@keyframes carousel-autoplay {
-  0% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-25%);
-  }
-  50% {
-    transform: translateX(-50%);
-  }
-  75% {
-    transform: translateX(-75%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
 @keyframes carousel-slidein {
   0% {
     transform: translateX(100%);
@@ -111,6 +123,7 @@
     transform: translateX(0);
   }
 }
+
 @keyframes carousel-slideout {
   0% {
     opacity: 1;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 96ab055..229bda2 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
   position: relative;
 
   .menu {
-    animation: slide-down .2s;
+    animation: slide-down .2s 1;
     display: none;
     left: 0;
     position: absolute;
diff --git a/src/forms.less b/src/forms.less
index f9dc328..226570a 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -24,9 +24,6 @@
   &:focus {
     border-color: @primary-color;
   }
-  &[disabled] {
-    background: @bg-color;
-  }
 
   // Input sizes
   &.input-sm {
@@ -93,6 +90,7 @@
   outline: 0;
   padding: .5rem .8rem;
   vertical-align: middle;
+
   &[multiple] {
     option {
       padding: .2rem .4rem;
@@ -361,6 +359,41 @@
   }
 }
 
+// Form disabled
+.form-input,
+.form-select {
+  &:disabled,
+  &.disabled {
+    background-color: @dark-bg-color;
+    cursor: default;
+    opacity: .5;
+  }
+}
+
+input {
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: @dark-bg-color;
+      border-color: @light-gray-color;
+      cursor: default;
+      opacity: .5;
+      pointer-events: none;
+    }
+  }
+}
+
+.form-switch {
+  input {
+    &:disabled,
+    &.disabled {
+      & + .form-icon::after {
+        background: @light-bg-color;
+      }
+    }
+  }
+}
+
 // Form Horizontal
 .form-horizontal {
   padding: 1rem;
@@ -368,10 +401,12 @@
   .form-group {
     display: flex;
   }
+
   .form-label {
     padding: .8rem .4rem;
     margin-bottom: 0;
   }
+
   .form-checkbox,
   .form-radio,
   .form-switch {
diff --git a/src/mixins.less b/src/mixins.less
index d2c5c7a..b97ef42 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -17,7 +17,7 @@
   border-color: @color;
 }
 .label-base() {
-  border-radius: .2rem;
+  border-radius: @border-radius;
   display: inline-block;
   line-height: 1;
   padding: .3rem .4rem;
diff --git a/src/pagination.less b/src/pagination.less
index cdd2f12..055c528 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -20,6 +20,12 @@
       &:hover {
         color: @primary-color;
       }
+      &[disabled],
+      &.disabled {
+        cursor: default;
+        opacity: .5;
+        pointer-events: none;
+      }
     }
 
     &.active {
diff --git a/src/sliders.less b/src/sliders.less
index 7093cab..19db56b 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -47,6 +47,22 @@
     }
   }
 
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      background: @light-gray-color;
+      transform: scale(1);
+    }
+    &::-moz-range-thumb {
+      background: @light-gray-color;
+      transform: scale(1);
+    }
+    &::-ms-thumb {
+      background: @light-gray-color;
+      transform: scale(1);
+    }
+  }
+
   // Slider Track
   &::-webkit-slider-runnable-track {
     background: @border-color;