New UI elements

Adding form and grid start and end.

diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index a5b535a..91e01f9 100644 (file)
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -19,7 +19,7 @@
 <div class="cell small-12 glm-f6-ui-field">
     <div class="grid-x grid-margin-x">
         <div class="cell shrink glm-f6-ui-field-input">
-            <div class="switch">
+            <div class="switch small glm-f6-ui-field-input-switch">
                 <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if $ui.value} checked{/if}{if $ui.required} required{/if}>
                 <label for="{$ui.field}" class="switch-paddle">
                     <span class="show-for-sr">{$ui.label}</span>

diff --git a/views/ui/f6/form-end.html b/views/ui/f6/form-end.html
new file mode 100644 (file)
index 0000000..323f6eb
--- /dev/null
+++ b/views/ui/f6/form-end.html
@@ -0,0 +1,2 @@
+{* Form End *}
+</form>

diff --git a/views/ui/f6/form-start.html b/views/ui/f6/form-start.html
new file mode 100644 (file)
index 0000000..669693d
--- /dev/null
+++ b/views/ui/f6/form-start.html
@@ -0,0 +1,16 @@
+{*
+    Foundation 6 Form Start
+    {$ui = [
+        'id'     => string Form id
+        'action' => string URL
+        'method' => string Method POST or GET
+        'File'   => Bool   0 or 1
+    ]}
+*}
+<form
+    id="{$ui.id}"
+    action="{$ui.action}"
+    method="{$ui.method}"
+    {if $ui.file}enctype="multipart/form-data"{/if}
+    data-abide novalidate data-validate-on-blur="true">
+

diff --git a/views/ui/f6/grid-end.html b/views/ui/f6/grid-end.html
new file mode 100644 (file)
index 0000000..7b1f70f
--- /dev/null
+++ b/views/ui/f6/grid-end.html
@@ -0,0 +1,5 @@
+{*
+    Foundation 6 - Grid End
+    </div>
+*}
+</div>

diff --git a/views/ui/f6/grid-start.html b/views/ui/f6/grid-start.html
new file mode 100644 (file)
index 0000000..266c5bd
--- /dev/null
+++ b/views/ui/f6/grid-start.html
@@ -0,0 +1,70 @@
+{*
+    Foundation 6 - Grid Start
+
+    {$ui = [
+        'nowrap'            => string   True if no sections should wrap to the right,
+        'backgroundColor'   => string   Background color of overall grid area,
+        'sectionColor'      => string   background color of sections
+    ]}
+
+*}
+{$glm_f6_ui_wrapsize = 6 scope="global"}
+{if isset($ui.nowrap) && $ui.nowrap}
+    {$glm_f6_ui_wrapsize = 12 scope="global"}
+{/if}
+{$glm_f6_ui_background_color = 'white' scope="global"}
+{if isset($ui.backgroundColor)}
+    {$glm_f6_ui_background_color = $ui.backgroundColor scope="global"}
+{/if}
+{$glm_f6_ui_section_color = 'white' scope="global"}
+{if isset($ui.sectionColor)}
+    {$glm_f6_ui_section_color = $ui.sectionColor scope="global"}
+{/if}
+
+<style>
+    .glm-foundation-6-ui {
+        background-color: {$glm_f6_ui_background_color} !important;
+    }
+    .glm-f6-ui-section {
+    }
+    .glm-f6-ui-section-title {
+        margin-top: 1rem;
+    }
+    .glm-f6-ui-section-start {
+        background-color: {$glm_f6_ui_section_color} !important;
+    }
+    .glm-f6-ui-field {
+        margin-bottom: 1rem !important;
+    }
+    .glm-f6-ui-label-container {
+    }
+    .glm-f6-ui-label-container-right {
+        margin-left: 0 !important;
+    }
+    .glm-f6-ui-field-label {
+    }
+    .glm-f6-ui-field-input {
+        margin-bottom: 0 !important;
+    }
+    .glm-f6-ui-field-input-switch {
+        margin-bottom: 0 !important;
+    }
+    .glm-f6-ui-field-input-number {
+        margin-bottom: 0 !important;
+    }
+    .glm-f6-ui-field-data-error {
+    }
+    .glm-f6-ui-field-help-text {
+        margin-bottom: 0 !important;
+    }
+    .glm-f6-ui-field-error-text {
+        margin-top: 0 !important;
+    }
+    .glm-f6-ui-text-line {
+        margin-bottom: 1rem !important;
+    }
+</style>
+<div class="callout grid-container glm-foundation-6-ui">
+    {* <div class="grid-x grid-margin-x"> *}
+
+