From 54fd3d467d20579368c01fc707883d24f46cf47a Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 15 Sep 2016 13:50:39 +0300 Subject: [PATCH] Tabs, tables and forms demos --- docs/modules.html | 157 +++++++++++++++++++++++++++++++++++++- scss/mini-extra/_tab.scss | 1 - 2 files changed, 156 insertions(+), 2 deletions(-) diff --git a/docs/modules.html b/docs/modules.html index 70f59e1..3a59c20 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -266,7 +266,7 @@

Vertical navigation dropdown example

Example


-
+
  • Link 1
    • @@ -296,6 +296,161 @@ </div>

+

Tabs

+

The tabbed navigation module allows you to easily create tabbed navigation systems, that are fully customizable to fit your needs. Nested tabs are not supported and might cause unexpected behavior.

+ +

Tabbed navigation structure

+

The structure of the tabbed navigation system is as follows:

+
    +
  • Use the .tabs class to specify the container for the tabbed navigation system.
    • +
  • For each tab use an <input type="radio">, immediately followed by a <div> element.
    • +
  • This last element should contain a <label> linking to the radio button of the tab and another <div> that will contain the tab's contents.
    • +
  • Specify the tab that will be open by default using the checked property on one of the radio buttons.
    • +
+ + +

Tabbed navigation example *

+
+ +
+ +
Tab 1 content...
+
+ +
+ +
Tab 2 content...
+
+ +
+ +
Tab 3 content...
+
+
+ 
<div class="tabs">
+  <input type="radio" name="tabs-radio" id="tab1" checked>
+  <div>
+    <label for="tab1">Tab 1</label>
+    <div>Tab 1 content...</div>
+  </div>
+  <input type="radio" name="tabs-radio" id="tab2">
+  <div>
+    <label for="tab2">Tab 2</label>
+    <div>Tab 2 content...</div>
+  </div>
+  <input type="radio" name="tabs-radio" id="tab3">
+  <div>
+    <label for="tab3">Tab 3</label>
+    <div>Tab 3 content...</div>
+  </div>
+</div>

+

(*):Due to a minor incompatibility between panels and tabs, the above example is not shown like most of the others. Our most experienced teams of developers and designers are on this.

+ +

Tables

+

Tables can be easily stylized to look more modern, using stripes and selective borders (vertical only by default). Classes for horizontal only borders(.hor) and full borders(.bor) are also provided. Use the .tbl class in your <table> elements to easily apply your styling.

+ +

Default table example

+

Example


+ + + + + + + + + + + + + + + + + + +
Column 1 Column 2
Name Value
Name Value
Name Value
Name Value

+ 
<table class="tbl">
+  <thead>
+    <th>Column 1</th> <th>Column 2</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Name</td> <td>Value</td>
+    </tr>
+    <tr>
+      <td>Name</td> <td>Value</td>
+    </tr>
+    <tr>
+      <td>Name</td> <td>Value</td>
+    </tr>
+    <tr>
+      <td>Name</td> <td>Value</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

Forms

+

Form customization and styling is easy using the .frm class in any <form> element. Inputs inside the form will be automatically styled and they will use complementary highlights for certain events (:focus, disabled, :invalid etc.). You can use the .aligned and .inline classes to create aligned and inline forms respectively. Aligned forms should be used in combination with the .ctrl-group class to group together labels with their respective inputs.

+ +

Vertical form

+

Example

+
+ + + + +
+ 
<form class="frm">
+  <label for="email1">Email</label>
+  <input type="email" id="email1">
+  <label for="password1">Password</label>
+  <input type="password" id="password1">
+</form>
+
+ +

Inline form

+

Example

+
+ + + + +
+ 
<form class="frm inline">
+  <label for="email1">Email</label>
+  <input type="email" id="email1">
+  <label for="password1">Password</label>
+  <input type="password" id="password1">
+</form>
+
+ +

Aligned form

+

Example

+
+
+ + +
+
+ + +
+
+ 
<form class="frm aligned">
+  <div class="ctrl-group">
+    <label for="email1">Email</label>
+    <input type="email" id="email1">
+  </div>
+  <div class="ctrl-group">
+    <label for="password1">Password</label>
+    <input type="password" id="password1">
+  </div>
+</form>
+

+ +
diff --git a/scss/mini-extra/_tab.scss b/scss/mini-extra/_tab.scss index 33788b7..4dcb009 100644 --- a/scss/mini-extra/_tab.scss +++ b/scss/mini-extra/_tab.scss @@ -73,7 +73,6 @@ &:checked + div > label{ color: $tabs-active-label-color; background: $tabs-active-label-bg-color; - // border: 1px solid #ccc; border-top: $tabs-active-label-stripe; border-bottom: 1px solid $tabs-content-bg-color; & + div{