Merge pull request #402 from picturepan2/0.5.1

0.5.1
picturepan2 · Feb 18, 2018 · 7a6af53 · 7a6af53
2 parents 4a784e6 + dd6891d
commit 7a6af53
Show file tree

Hide file tree

Showing 47 changed files with 6,141 additions and 406 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 ## Spectre.css Changelog
 
+### [v0.5.1](https://github.com/picturepan2/spectre/releases/tag/v0.5.1)
+
+IMPORTANT: Move Autocomplete to the Experimentals
+- Add form checkbox, radio and switch support to Menus
+- Add responsive horizontal form support #375
+- Add Favicons in the docs #398
+- Fix Off-canvas z-index problem #361
+- Fix icons disappearing on group classes on focus
+- Fix Deprecation Warning #396 #356
+- Initial commit of RTL support (not finished)
+
 ### [v0.5.0](https://github.com/picturepan2/spectre/releases/tag/v0.5.0)
 
 - IMPORTANT: Restore /dist folder

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 朱龑
+Copyright (c) 2016 - 2018 Yan Zhu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -62,7 +62,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 ### Components
 - [Accordions](https://picturepan2.github.io/spectre/components.html#accordions)
-- [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete)
 - [Avatars](https://picturepan2.github.io/spectre/components.html#avatars)
 - [Badges](https://picturepan2.github.io/spectre/components.html#badges)
 - [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs)
@@ -87,6 +86,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities
 
 ### Experimentals
+- [Autocomplete](https://picturepan2.github.io/spectre/experimentals.html#autocomplete)
 - [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars)
 - [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only
 - [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - CSS only

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
@@ -1,10 +1,60 @@
-/*! Spectre.css Experimentals v0.5.0 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.5.1 | MIT License | github.com/picturepan2/spectre */
+.form-autocomplete {
+  position: relative;
+}
+
+.form-autocomplete .form-autocomplete-input {
+  align-content: flex-start;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-line-pack: start;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 1.6rem;
+  padding: .1rem;
+}
+
+.form-autocomplete .form-autocomplete-input.is-focused {
+  border-color: #5755d9; 
+  box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+}
+
+.form-autocomplete .form-autocomplete-input .form-input {
+  border-color: transparent;
+  box-shadow: none;
+  display: inline-block;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  height: 1.2rem;
+  line-height: .8rem;
+  margin: .1rem;
+  width: auto;
+}
+
+.form-autocomplete .menu {
+  left: 0;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+}
+
+.form-autocomplete.autocomplete-oneline .form-autocomplete-input {
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.form-autocomplete.autocomplete-oneline .chip {
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
 .calendar {
   border: .05rem solid #e7e9ed;
   border-radius: .1rem;
   display: block;
   min-width: 280px;
-  text-align: center;
 }
 
 .calendar .calendar-nav {
@@ -42,6 +92,7 @@
   border-bottom: .05rem solid #e7e9ed;
   color: #acb3c2;
   font-size: .7rem;
+  text-align: center;
 }
 
 .calendar .calendar-body {
@@ -202,7 +253,6 @@
   margin: .1rem auto;
   overflow: hidden;
   padding: 3px 4px;
-  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -211,9 +261,10 @@
   background: #f8f9fa;
   display: block;
   overflow: hidden;
-  -webkit-overflow-scrolling: touch; 
+  -webkit-overflow-scrolling: touch;
   position: relative;
   width: 100%;
+  z-index: 1;
 }
 
 .carousel .carousel-container {
@@ -254,7 +305,7 @@
   top: 50%;
   transform: translateY(-50%);
   transition: all .4s ease;
-  z-index: 200;
+  z-index: 100;
 }
 
 .carousel .carousel-container .item-prev {
@@ -291,7 +342,7 @@
   position: absolute;
   transform: translateX(-50%);
   width: 10rem;
-  z-index: 200;
+  z-index: 100;
 }
 
 .carousel .carousel-nav .nav-item {
@@ -558,7 +609,7 @@
 
 .off-canvas .off-canvas-toggle {
   display: block;
-  left: .4rem;
+  left: .4rem; 
   position: absolute;
   top: .4rem;
   transition: none;
@@ -573,9 +624,9 @@
   overflow-y: auto;
   position: fixed;
   top: 0;
-  transform: translateX(-100%);
+  transform: translateX(-100%); 
   transition: transform .25s ease;
-  z-index: 300;
+  z-index: 200;
 }
 
 .off-canvas .off-canvas-content {
@@ -607,7 +658,7 @@
 .off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay,
 .off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay {
   display: block;
-  z-index: 200;
+  z-index: 100;
 }
 
 @media (min-width: 960px) {

diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
@@ -1,4 +1,4 @@
-/*! Spectre.css Icons v0.5.0 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Icons v0.5.1 | MIT License | github.com/picturepan2/spectre */
 .icon {
   box-sizing: border-box;
   display: inline-block;

diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
diff --git a/dist/spectre.css b/dist/spectre.css
@@ -1,4 +1,4 @@
-/*! Spectre.css v0.5.0 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css v0.5.1 | MIT License | github.com/picturepan2/spectre */
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
@@ -501,7 +501,7 @@ dl dd {
 .table {
   border-collapse: collapse;
   border-spacing: 0;
-  text-align: left;
+  text-align: left; 
   width: 100%;
 }
 
@@ -614,9 +614,7 @@ dl dd {
   color: #fff;
 }
 
-.btn.btn-primary.loading::after,
-.btn.btn-success.loading::after,
-.btn.btn-error.loading::after {
+.btn.btn-primary.loading::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
 }
@@ -645,6 +643,11 @@ dl dd {
   color: #fff;
 }
 
+.btn.btn-success.loading::after {
+  border-bottom-color: #fff;
+  border-left-color: #fff;
+}
+
 .btn.btn-error {
   background: #e85600;
   border-color: #d95000;
@@ -669,6 +672,11 @@ dl dd {
   color: #fff;
 }
 
+.btn.btn-error.loading::after {
+  border-bottom-color: #fff;
+  border-left-color: #fff;
+}
+
 .btn.btn-link {
   background: transparent;
   border-color: transparent;
@@ -844,6 +852,10 @@ legend {
   color: #acb3c2;
 }
 
+.form-input::-ms-input-placeholder {
+  color: #acb3c2;
+}
+
 .form-input::placeholder {
   color: #acb3c2;
 }
@@ -955,6 +967,7 @@ textarea.form-input {
   top: 50%;
   transform: translateY(-50%);
   width: .8rem;
+  z-index: 2;
 }
 
 .has-icon-left .form-icon {
@@ -1309,8 +1322,10 @@ input.disabled + .form-icon {
 }
 
 .form-horizontal .form-group {
-  display: flex; 
+  display: flex;
   display: -ms-flexbox;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .label {
@@ -1977,46 +1992,6 @@ summary.accordion-header::-webkit-details-marker {
   display: none;
 }
 
-.form-autocomplete {
-  position: relative;
-}
-
-.form-autocomplete .form-autocomplete-input {
-  align-content: flex-start;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-line-pack: start;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: auto;
-  min-height: 1.6rem;
-  padding: .1rem;
-}
-
-.form-autocomplete .form-autocomplete-input.is-focused {
-  border-color: #5755d9; 
-  box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
-}
-
-.form-autocomplete .form-autocomplete-input .form-input {
-  border-color: transparent;
-  box-shadow: none;
-  display: inline-block;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  height: 1.2rem;
-  line-height: .8rem;
-  margin: .1rem;
-  width: auto;
-}
-
-.form-autocomplete .menu {
-  left: 0;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-}
-
 .avatar {
   background: #5755d9;
   border-radius: 50%;
@@ -2397,7 +2372,7 @@ summary.accordion-header::-webkit-details-marker {
   min-width: 180px;
   padding: .4rem;
   transform: translateY(.2rem);
-  z-index: 100;
+  z-index: 300;
 }
 
 .menu.menu-nav {
@@ -2436,6 +2411,12 @@ summary.accordion-header::-webkit-details-marker {
   color: #5755d9;
 }
 
+.menu .menu-item .form-checkbox,
+.menu .menu-item .form-radio,
+.menu .menu-item .form-switch {
+  margin: .1rem 0;
+}
+
 .menu .menu-item + .menu-item {
   margin-top: .2rem;
 }
@@ -2513,7 +2494,6 @@ summary.accordion-header::-webkit-details-marker {
   box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
   display: block;
   padding: 0 .8rem;
-  text-align: left;
 }
 
 .modal-container .modal-header {
@@ -2669,7 +2649,7 @@ summary.accordion-header::-webkit-details-marker {
   transform: translate(-50%, -50%) scale(0);
   transition: transform .2s ease;
   width: 320px;
-  z-index: 400;
+  z-index: 300;
 }
 
 .popover *:focus + .popover-container,

diff --git a/dist/spectre.min.css b/dist/spectre.min.css