From afb32d17458303623f050224cba14739b27355d3 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 15 Aug 2017 18:40:08 +0800 Subject: Improve large Buttons and Forms --- docs/elements.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 3994590..ba51922 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -959,6 +959,7 @@

Form icons

+

Spectre Form components has Spectre Icons support.

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

@@ -1210,7 +1211,7 @@

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

-
+
form-input
@@ -1251,7 +1252,7 @@
- form-checkbox, radio and switch + form-checkbox, radio and switch (Error status only)
+ +
<div class="filter">
+  <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked />
+  <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden />
+  <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden />
+
+  <div class="filter-nav">
+    <label class="chip" for="tag-all">All</label>
+    <label class="chip" for="tag-action">Action</label>
+    <label class="chip" for="tag-roleplaying">Roleplaying</label>
+  </div>
+
+  <div class="filter-body">
+    <div class="filter-item card" data-tag="tag-action">
+      <!-- Filter item content -->
+    </div>
+    <div class="filter-item card" data-tag="tag-roleplaying">
+      <!-- Filter item content -->
+    </div>
+    <!-- Filter items -->
+  </div>
+</div>
+
+
diff --git a/docs/utilities.html b/docs/utilities.html index 1f1b9d7..c6a4c3f 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -428,7 +428,7 @@

Loading

-

Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status. Add the btn-lg class for large size.

+

Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.

@@ -436,7 +436,7 @@
-

Add the btn-lg class for large size.

+

Add the loading-lg class for large size.

-- cgit v1.3.1-26-gb76a From b56b14d2f4a5c30c9a3d106377b40d3a7f595b8a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 16 Aug 2017 19:53:45 +0800 Subject: Move Panels and Empty states to Components from Layout --- README.md | 4 +- docs/components.html | 334 ++++++++++++++++++++++++++++++++++++++-------- docs/css/docs.css | 1 + docs/elements.html | 84 ++++++------ docs/experimentals.html | 54 ++++---- docs/getting-started.html | 50 ++++--- docs/layout.html | 256 ++--------------------------------- docs/src/docs.less | 1 + docs/utilities.html | 48 +++---- 9 files changed, 420 insertions(+), 412 deletions(-) (limited to 'docs/elements.html') diff --git a/README.md b/README.md index 65b957a..483884f 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system - [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites -- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section -- [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens #### Components - [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content @@ -67,10 +65,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range - [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers - [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks +- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens - [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links - [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages +- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section - [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers - [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views diff --git a/docs/components.html b/docs/components.html index 3143683..c87bd8e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -104,12 +104,6 @@
  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@
  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@
  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -251,8 +251,8 @@
    -
    -

    Accordions

    +
    +

    Accordions

    Accordions are used to toggle sections of content.

    @@ -402,8 +402,8 @@
    -
    -

    Autocomplete

    +
    +

    Autocomplete

    Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

    @@ -529,8 +529,8 @@
    -
    -

    Avatars

    +
    +

    Avatars

    Avatars are user profile pictures.

    @@ -610,8 +610,8 @@
    -
    -

    Badges

    +
    +

    Badges

    Badges are often used as unread number indicators.

    @@ -686,8 +686,8 @@
    -
    -

    Bars

    +
    +

    Bars

    Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.

    @@ -732,7 +732,7 @@ </div> -

    Slider bars

    +

    Slider bars

    @@ -781,8 +781,8 @@
    -