Merge pull request #180 from picturepan2/feature/0.2.12 v0.2.12

Feature/0.2.12

19 files changed, 277 insertions, 46 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index a4b5fa7..34f2240 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -8,7 +8,7 @@
     flex-wrap: wrap;
     height: auto;
     min-height: 3.2rem;
-    padding: .1rem 0 .1rem .2rem;
+    padding: .1rem 0 0 .1rem;
 
     &.is-focused {
       border-color: @primary-color;
@@ -21,7 +21,7 @@
       display: inline-block;
       flex: 1 0 auto;
       height: 2.8rem;
-      padding: .3rem;
+      padding: .3rem .8rem;
       width: auto;
     }
   }
diff --git a/src/avatars.less b/src/avatars.less
index a159573..9aa653c 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -44,11 +44,12 @@
 
   .avatar-icon {
     background: @bg-color-light;
-    bottom: -.2em;
+    bottom: 14.64%;
     height: 50%;
-    padding: 5%;
+    padding: .2rem;
     position: absolute;
-    right: -.2em;
+    right: 14.64%;
+    transform: translate(50%, 50%);
     width: 50%;
   }
 
diff --git a/src/badges.less b/src/badges.less
index 63ac6d7..f6dfdbf 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -20,9 +20,9 @@
     &::after {
       font-size: @font-size-sm;
       height: 2rem;
-      line-height: 1.4rem;
+      line-height: 1;
       min-width: 2rem;
-      padding: .2rem .5rem;
+      padding: .3rem .5rem;
       text-align: center;
       white-space: nowrap;
     }
@@ -46,4 +46,25 @@
       transform: translate(50%, -50%);
     }
   }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: @zindex-1;
+    }
+  }
+
+  &.avatar-xs {
+    &::after {
+      content: "";
+      height: .8rem;
+      min-width: .8rem;
+      padding: 0;
+      width: .8rem;
+    }
+  }
 }
diff --git a/src/bars.less b/src/bars.less
index a996142..e494a3e 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -54,18 +54,15 @@
   }
 
   .bar-slider-btn {
-    appearance: none;
     background: @primary-color;
     border: 0;
     border-radius: 50%;
-    cursor: pointer;
     height: 1.2rem;
     padding: 0;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
-    transition: all .2s ease;
     width: 1.2rem;
 
     &:active {
diff --git a/src/base.less b/src/base.less
index 7b20a39..ba21bee 100644
--- a/src/base.less
+++ b/src/base.less
@@ -23,8 +23,13 @@ body {
 
 a {
   color: @link-color;
+  outline: none;
   text-decoration: none;
 
+  &:focus {
+    .control-shadow();
+  }
+
   &:focus,
   &:hover,
   &:active,
@@ -33,9 +38,3 @@ a {
     text-decoration: underline;
   }
 }
-
-// Focus state
-:focus {
-  .control-shadow();
-  outline: none;
-}
diff --git a/src/buttons.less b/src/buttons.less
index 96eb084..4cf1d50 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -11,6 +11,7 @@
   font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   text-align: center;
   text-decoration: none;
@@ -19,6 +20,7 @@
   white-space: nowrap;
   &:focus {
     background: @secondary-color-light;
+    .control-shadow();
     text-decoration: none;
   }
   &:hover {
diff --git a/src/calendars.less b/src/calendars.less
index 32711a4..46fd286 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -54,6 +54,7 @@
       cursor: pointer;
       height: 2.8rem;
       line-height: 2rem;
+      outline: none;
       padding: .3rem;
       position: relative;
       text-align: center;
@@ -67,6 +68,10 @@
         color: @primary-color;
       }
 
+      &:focus {
+        .control-shadow();
+      }
+
       &:focus,
       &:hover {
         background: @secondary-color-light;
diff --git a/src/carousels.less b/src/carousels.less
index 52205ab..8b01e94 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -55,7 +55,7 @@
     &: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),
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-      animation: carousel-slidein .75s ease-in 1;
+      animation: carousel-slidein .75s ease-in-out 1;
       opacity: 1;
       z-index: @zindex-1;
     }
@@ -105,16 +105,6 @@
   }
 }
 
-@supports (object-fit: cover) {
-  .carousel-item {
-    img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-}
-
 @keyframes carousel-slidein {
   0% {
     transform: translateX(100%);
diff --git a/src/chips.less b/src/chips.less
index ae2bef1..2d45636 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -5,8 +5,8 @@
   border-radius: @border-radius;
   color: @gray-color-dark;
   display: inline-flex;
-  height: 2.6rem;
-  margin: .1rem .2rem .1rem 0;
+  height: 2.8rem;
+  margin: 0 .1rem .1rem 0;
   max-width: 100%;
   padding: .1rem .8rem;
   text-decoration: none;
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
new file mode 100644
index 0000000..5007f70
--- /dev/null
+++ b/src/comparison-sliders.less
@@ -0,0 +1,115 @@
+// Image comparison slider
+// Credit: http://jsfiddle.net/os8bj2xq/
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: none;
+      object-position: left top;
+      position: absolute;
+      width: 100%;
+      z-index: -1;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+
+    .comparison-label {
+      right: 1.6rem;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: @zindex-0;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: 1.6rem;
+      top: 0;
+      z-index: @zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -.5rem, 0 .5rem;
+      color: @light-color;
+      content: "";
+      height: .3rem;
+      position: absolute;
+      right: .8rem;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: .3rem;
+      z-index: -@zindex-0;
+    }
+
+    .comparison-label {
+      left: 1.6rem;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: 1.5rem;
+    left: 0;
+    max-width: 100%;
+    min-width: 1.6rem;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: fade(@dark-color, 50%);
+    bottom: 1.6rem;
+    color: @light-color;
+    padding: .3rem .8rem;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: 4.8rem;
+  }
+  50% {
+    width: 1.6rem;
+  }
+  75% {
+    width: 2.4rem;
+  }
+  100% {
+    width: 0;
+  }
+}
diff --git a/src/component-icons.less b/src/component-icons.less
deleted file mode 100644
index 7551d05..0000000
--- a/src/component-icons.less
+++ /dev/null
@@ -1,8 +0,0 @@
-// Component icon support
-.btn,
-.toast,
-.menu {
-  .icon {
-    vertical-align: -10%;
-  }
-}
diff --git a/src/filters.less b/src/filters.less
new file mode 100644
index 0000000..e9ecfaf
--- /dev/null
+++ b/src/filters.less
@@ -0,0 +1,29 @@
+// Filters
+.filter {
+  .filter-nav {
+    margin: 1rem 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .filter-tag {
+    &#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
+    &#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
+    &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
+    &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
+    &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
+      background: @primary-color;
+      color: @light-color;
+    }
+
+    &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
+    &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
+    &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
+    &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
+      display: none;
+    }
+  }
+}
diff --git a/src/forms.less b/src/forms.less
index 561df6f..fe08dc7 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -33,12 +33,13 @@
   height: 3.2rem;
   line-height: 2rem;
   max-width: 100%;
-  outline: 0;
+  outline: none;
   padding: .5rem .8rem;
   position: relative;
   width: 100%;
   &:focus {
     border-color: @primary-color;
+    .control-shadow();
   }
   &::placeholder {
     color: @gray-color;
@@ -98,6 +99,7 @@
   color: inherit;
   font-size: @font-size;
   line-height: 2rem;
+  outline: none;
   padding: .5rem .8rem;
   vertical-align: middle;
 
@@ -115,6 +117,7 @@
   }
   &:focus {
     border-color: @primary-color;
+    .control-shadow();
   }
   &::-ms-expand {
     display: none;
diff --git a/src/icons.less b/src/icons.less
index 4384d48..dd77944 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -64,8 +64,8 @@
     background: currentColor;
     content: "";
     height: @icon-border-width;
-    left: 60%;
-    width: .9em;
+    left: 55%;
+    width: .8em;
   }
 }
 
@@ -104,6 +104,35 @@
   }
 }
 
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
 // Icon more
 .icon-more-horiz,
 .icon-more-vert {
@@ -228,7 +257,7 @@
     border-right-color: transparent;
     content: "";
     height: 0;
-    left: 5%;
+    left: 10%;
     top: 95%;
     transform: translate(0, -100%);
     width: 0;
@@ -309,6 +338,29 @@
   }
 }
 
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: @border-radius;
+    border-top-right-radius: @border-radius;
+    content: "";
+    height: 90%;
+    width: 90%;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: @border-radius;
+    content: "";
+    height: 50%;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: 50%;
+  }
+}
+
 // Icon download & upload
 .icon-download,
 .icon-upload {
@@ -440,3 +492,12 @@
     transform: translate(-30%, -55%) rotate(135deg);
   }
 }
+
+// Component icon support
+.btn,
+.toast,
+.menu {
+  .icon {
+    vertical-align: -10%;
+  }
+}
diff --git a/src/media.less b/src/media.less
index 02c7be5..fcd22e0 100644
--- a/src/media.less
+++ b/src/media.less
@@ -5,6 +5,17 @@
   max-width: 100%;
 }
 
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
 .video-responsive {
   display: block;
   overflow: hidden;
@@ -15,7 +26,7 @@
   &::before {
     content: "";
     display: block;
-    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
   }
 
   iframe,
@@ -38,13 +49,13 @@
 
 .video-responsive-4-3 {
   &::before {
-    padding-bottom: 75%; /* 4:3 */
+    padding-bottom: 75%; // Ratio 4:3
   }
 }
 
 .video-responsive-1-1 {
   &::before {
-    padding-bottom: 100%; /* 1:1 */
+    padding-bottom: 100%; // Ratio 1:1
   }
 }
 
diff --git a/src/modals.less b/src/modals.less
index 0406533..4353a54 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -47,7 +47,6 @@
   background: @bg-color-light;
   border-radius: @border-radius;
   display: block;
-  margin: 0 auto;
   padding: 0;
   .shadow-variant(.4rem);
   text-align: left;
diff --git a/src/navbar.less b/src/navbar.less
index ea565ef..3e212c0 100755
--- a/src/navbar.less
+++ b/src/navbar.less
@@ -15,7 +15,7 @@
     }
   }
 
-  .navbar-primary {
+  .navbar-center {
     align-items: center;
     display: flex;
     flex: 0 0 auto;
diff --git a/src/sliders.less b/src/sliders.less
index 46d6b87..779117d 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -7,6 +7,11 @@
   width: 100%;
   height: 2.4rem;
 
+  &:focus {
+    .control-shadow();
+    outline: none;
+  }
+
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
diff --git a/src/utilities.less b/src/utilities.less
index 0f9e959..5541243 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -69,6 +69,7 @@
   margin-right: auto;
 }
 
+// Spacing
 .mt-10 {
   margin-top: 1rem;
 }