diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e5a3f77c..af70778f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ ## Spectre.css Changelog +### [v0.4.7](https://github.com/picturepan2/spectre/releases/tag/v0.4.7) + +- Add new button colors (success and error) #227 #241 #342 +- Add overflow-scrolling: touch; CSS for better scrolling +- Add touch support to Parallax image hover effect +- Update the Modal example code +- Fix form horizontal layout spacing + ### [v0.4.6](https://github.com/picturepan2/spectre/releases/tag/v0.4.6) - Add new Sliders example #328 diff --git a/bower.json b/bower.json index f965ced7c..75bf02095 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.4.6", + "version": "0.4.7", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", diff --git a/docs/components.html b/docs/components.html index 6b5bb3c42..a01e3d0a7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -25,7 +25,7 @@
<div class="modal active">
- <div class="modal-overlay"></div>
+<div class="modal active" id="modal-id">
+ <a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
- <button class="btn btn-clear float-right"></button>
+ <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
<div class="modal-title h5">Modal title</div>
</div>
<div class="modal-body">
@@ -1518,7 +1532,7 @@ Candy ipsum
<div class="modal modal-sm">
- <div class="modal-overlay"></div>
+ <a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<!-- modal structure here -->
</div>
@@ -2450,7 +2464,7 @@ #T
<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>
+
+
+ Add the btn-success
or btn-error
class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.
<button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
<div class="parallax">
- <div class="parallax-top-left"></div>
- <div class="parallax-top-right"></div>
- <div class="parallax-bottom-left"></div>
- <div class="parallax-bottom-right"></div>
+ <div class="parallax-top-left" tabindex="1"></div>
+ <div class="parallax-top-right" tabindex="2"></div>
+ <div class="parallax-bottom-left" tabindex="3"></div>
+ <div class="parallax-bottom-right" tabindex="4"></div>
<div class="parallax-content">
<div class="parallax-front">
<h2>tvOS parallax demo</h2>
@@ -985,7 +999,7 @@ #
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
-Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.
+Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Docs GitHub @@ -65,10 +65,10 @@
There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.
+Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.