shipyard-framework 0.3.3 → 0.3.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/helpers/shipyard/alert_helper.rb +52 -0
- data/app/helpers/shipyard/button_helper.rb +34 -0
- data/app/helpers/shipyard/form_helper.rb +16 -0
- data/app/helpers/shipyard/icon_helper.rb +49 -0
- data/app/helpers/shipyard/layout_helper.rb +31 -0
- data/assets/stylesheets/shipyard/components/_alerts.sass +1 -0
- data/assets/stylesheets/shipyard/components/_boxes.sass +3 -0
- data/assets/stylesheets/shipyard/components/_tooltips.sass +1 -1
- data/assets/stylesheets/shipyard/core/_type.sass +4 -1
- data/assets/stylesheets/shipyard/utilities/_colors.sass +4 -0
- data/assets/stylesheets/shipyard/variables/_colors.scss +72 -9
- data/lib/shipyard-framework.rb +2 -0
- data/lib/shipyard-framework/jekyll/alert_tag.rb +20 -0
- data/lib/shipyard-framework/jekyll/button_tag.rb +2 -2
- data/lib/shipyard-framework/rails/railtie.rb +0 -14
- data/lib/shipyard-framework/version.rb +1 -1
- data/shipyard.gemspec +1 -1
- data/styleguide/.gitignore +3 -0
- data/styleguide/.nojekyll +0 -0
- data/styleguide/.ruby-version +1 -0
- data/styleguide/Gemfile +6 -0
- data/styleguide/Gemfile.lock +87 -0
- data/styleguide/_config.yml +43 -0
- data/styleguide/_layouts/application.html +24 -0
- data/styleguide/_sass/layout.sass +35 -0
- data/styleguide/_sass/views.sass +27 -0
- data/styleguide/assets/css/application.sass +8 -0
- data/styleguide/components/alerts.html +12 -0
- data/styleguide/components/boxes.html +37 -0
- data/styleguide/components/buttons.html +67 -0
- data/styleguide/components/empty-states.html +12 -0
- data/styleguide/components/forms.html +82 -0
- data/styleguide/components/grid.html +44 -0
- data/styleguide/components/index.html +16 -0
- data/styleguide/components/modals.html +15 -0
- data/styleguide/components/tooltips.html +19 -0
- data/styleguide/index.html +6 -0
- data/styleguide/utilities/colors.html +24 -0
- data/styleguide/utilities/index.html +16 -0
- data/styleguide/utilities/responsive.html +19 -0
- data/styleguide/utilities/typography.html +56 -0
- metadata +43 -18
- data/lib/shipyard-framework/rails/alert_helper.rb +0 -45
- data/lib/shipyard-framework/rails/button_helper.rb +0 -36
- data/lib/shipyard-framework/rails/form_helper.rb +0 -18
- data/lib/shipyard-framework/rails/icon_helper.rb +0 -51
- data/lib/shipyard-framework/rails/layout_helpers.rb +0 -33
|
@@ -0,0 +1 @@
|
|
|
1
|
+
2.3.1
|
data/styleguide/Gemfile
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
PATH
|
|
2
|
+
remote: ..
|
|
3
|
+
specs:
|
|
4
|
+
shipyard-framework (0.3.3)
|
|
5
|
+
actionview
|
|
6
|
+
|
|
7
|
+
GEM
|
|
8
|
+
remote: https://rubygems.org/
|
|
9
|
+
specs:
|
|
10
|
+
actionview (5.1.3)
|
|
11
|
+
activesupport (= 5.1.3)
|
|
12
|
+
builder (~> 3.1)
|
|
13
|
+
erubi (~> 1.4)
|
|
14
|
+
rails-dom-testing (~> 2.0)
|
|
15
|
+
rails-html-sanitizer (~> 1.0, >= 1.0.3)
|
|
16
|
+
activesupport (5.1.3)
|
|
17
|
+
concurrent-ruby (~> 1.0, >= 1.0.2)
|
|
18
|
+
i18n (~> 0.7)
|
|
19
|
+
minitest (~> 5.1)
|
|
20
|
+
tzinfo (~> 1.1)
|
|
21
|
+
addressable (2.5.1)
|
|
22
|
+
public_suffix (~> 2.0, >= 2.0.2)
|
|
23
|
+
builder (3.2.3)
|
|
24
|
+
colorator (1.1.0)
|
|
25
|
+
concurrent-ruby (1.0.5)
|
|
26
|
+
erubi (1.6.1)
|
|
27
|
+
ffi (1.9.18)
|
|
28
|
+
forwardable-extended (2.6.0)
|
|
29
|
+
i18n (0.8.6)
|
|
30
|
+
jekyll (3.5.1)
|
|
31
|
+
addressable (~> 2.4)
|
|
32
|
+
colorator (~> 1.0)
|
|
33
|
+
jekyll-sass-converter (~> 1.0)
|
|
34
|
+
jekyll-watch (~> 1.1)
|
|
35
|
+
kramdown (~> 1.3)
|
|
36
|
+
liquid (~> 4.0)
|
|
37
|
+
mercenary (~> 0.3.3)
|
|
38
|
+
pathutil (~> 0.9)
|
|
39
|
+
rouge (~> 1.7)
|
|
40
|
+
safe_yaml (~> 1.0)
|
|
41
|
+
jekyll-sass-converter (1.5.0)
|
|
42
|
+
sass (~> 3.4)
|
|
43
|
+
jekyll-watch (1.5.0)
|
|
44
|
+
listen (~> 3.0, < 3.1)
|
|
45
|
+
kramdown (1.14.0)
|
|
46
|
+
liquid (4.0.0)
|
|
47
|
+
listen (3.0.8)
|
|
48
|
+
rb-fsevent (~> 0.9, >= 0.9.4)
|
|
49
|
+
rb-inotify (~> 0.9, >= 0.9.7)
|
|
50
|
+
loofah (2.0.3)
|
|
51
|
+
nokogiri (>= 1.5.9)
|
|
52
|
+
mercenary (0.3.6)
|
|
53
|
+
mini_portile2 (2.2.0)
|
|
54
|
+
minitest (5.10.3)
|
|
55
|
+
nokogiri (1.8.0)
|
|
56
|
+
mini_portile2 (~> 2.2.0)
|
|
57
|
+
pathutil (0.14.0)
|
|
58
|
+
forwardable-extended (~> 2.6)
|
|
59
|
+
public_suffix (2.0.5)
|
|
60
|
+
rails-dom-testing (2.0.3)
|
|
61
|
+
activesupport (>= 4.2.0)
|
|
62
|
+
nokogiri (>= 1.6)
|
|
63
|
+
rails-html-sanitizer (1.0.3)
|
|
64
|
+
loofah (~> 2.0)
|
|
65
|
+
rb-fsevent (0.10.2)
|
|
66
|
+
rb-inotify (0.9.10)
|
|
67
|
+
ffi (>= 0.5.0, < 2)
|
|
68
|
+
rouge (1.11.1)
|
|
69
|
+
safe_yaml (1.0.4)
|
|
70
|
+
sass (3.5.1)
|
|
71
|
+
sass-listen (~> 4.0.0)
|
|
72
|
+
sass-listen (4.0.0)
|
|
73
|
+
rb-fsevent (~> 0.9, >= 0.9.4)
|
|
74
|
+
rb-inotify (~> 0.9, >= 0.9.7)
|
|
75
|
+
thread_safe (0.3.6)
|
|
76
|
+
tzinfo (1.2.3)
|
|
77
|
+
thread_safe (~> 0.1)
|
|
78
|
+
|
|
79
|
+
PLATFORMS
|
|
80
|
+
ruby
|
|
81
|
+
|
|
82
|
+
DEPENDENCIES
|
|
83
|
+
jekyll
|
|
84
|
+
shipyard-framework!
|
|
85
|
+
|
|
86
|
+
BUNDLED WITH
|
|
87
|
+
1.15.3
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Welcome to Jekyll!
|
|
2
|
+
#
|
|
3
|
+
# This config file is meant for settings that affect your whole blog, values
|
|
4
|
+
# which you are expected to set up once and rarely edit after that. If you find
|
|
5
|
+
# yourself editing this file very often, consider using Jekyll's data files
|
|
6
|
+
# feature for the data you need to update frequently.
|
|
7
|
+
#
|
|
8
|
+
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
|
9
|
+
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
|
|
10
|
+
|
|
11
|
+
# Site settings
|
|
12
|
+
# These are used to personalize your new site. If you look in the HTML files,
|
|
13
|
+
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
|
|
14
|
+
# You can create any custom variable you would like, and they will be accessible
|
|
15
|
+
# in the templates via {{ site.myvariable }}.
|
|
16
|
+
title: Shipyard
|
|
17
|
+
description: A sweet front-end framework for Ruby on Rails and Jekyll.
|
|
18
|
+
baseurl: /shipyard # the subpath of your site, e.g. /blog
|
|
19
|
+
url: "" # the base hostname & protocol for your site, e.g. http://example.com
|
|
20
|
+
# source: ./app
|
|
21
|
+
# destination: ./tmp
|
|
22
|
+
# plugins_dir: ./app/_plugins
|
|
23
|
+
# layouts_dir: ./app/_layouts
|
|
24
|
+
# includes_dir: ./app/_includes
|
|
25
|
+
sass:
|
|
26
|
+
style: compressed
|
|
27
|
+
|
|
28
|
+
# Build settings
|
|
29
|
+
markdown: kramdown
|
|
30
|
+
plugins_dir:
|
|
31
|
+
- shipyard-framework
|
|
32
|
+
|
|
33
|
+
defaults:
|
|
34
|
+
-
|
|
35
|
+
scope:
|
|
36
|
+
path: "" # an empty string here means all files in the project
|
|
37
|
+
values:
|
|
38
|
+
layout: "application"
|
|
39
|
+
|
|
40
|
+
# Exclude from processing.
|
|
41
|
+
exclude:
|
|
42
|
+
- Gemfile
|
|
43
|
+
- Gemfile.lock
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
---
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>{{ page.title }}</title>
|
|
6
|
+
<link rel="stylesheet" media="all" href="{{ site.baseurl }}/assets/css/application.css" />
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<header>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<h6><a href="{{ site.baseurl }}/">{{ site.title }}</a></h6>
|
|
12
|
+
<ul>
|
|
13
|
+
<li><a href="{{ site.baseurl }}/">Overview</a></li>
|
|
14
|
+
<li><a href="{{ site.baseurl }}/components">Components</a></li>
|
|
15
|
+
<li><a href="{{ site.baseurl }}/utilities">Utilities</a></li>
|
|
16
|
+
</ul>
|
|
17
|
+
</div>
|
|
18
|
+
</header>
|
|
19
|
+
<div class="container">{{ content }}</div>
|
|
20
|
+
<footer class="align-center text-lightest">
|
|
21
|
+
© Shipyard Framework 2017
|
|
22
|
+
</footer>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
body
|
|
2
|
+
padding-top: 70px
|
|
3
|
+
|
|
4
|
+
header
|
|
5
|
+
$height: 50px
|
|
6
|
+
background: $gray-darkest
|
|
7
|
+
position: fixed
|
|
8
|
+
top: 0
|
|
9
|
+
left: 0
|
|
10
|
+
right: 0
|
|
11
|
+
height: $height
|
|
12
|
+
line-height: $height
|
|
13
|
+
color: #fff
|
|
14
|
+
z-index: 100
|
|
15
|
+
h6
|
|
16
|
+
font-weight: $bold
|
|
17
|
+
font-size: 24px
|
|
18
|
+
float: left
|
|
19
|
+
ul
|
|
20
|
+
float: right
|
|
21
|
+
font-weight: $medium
|
|
22
|
+
font-size: 18px
|
|
23
|
+
margin-right: -10px
|
|
24
|
+
li
|
|
25
|
+
display: inline
|
|
26
|
+
margin: 0 10px
|
|
27
|
+
a
|
|
28
|
+
color: rgba(#fff,.8)
|
|
29
|
+
&, &:hover
|
|
30
|
+
text-decoration: none
|
|
31
|
+
&:hover
|
|
32
|
+
color: #fff
|
|
33
|
+
|
|
34
|
+
footer
|
|
35
|
+
padding: 30px 0
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// Utilities: Colors
|
|
2
|
+
+component('shade')
|
|
3
|
+
&-list
|
|
4
|
+
display: table
|
|
5
|
+
width: 100%
|
|
6
|
+
&-item
|
|
7
|
+
text-align: center
|
|
8
|
+
display: table-cell
|
|
9
|
+
width: 10%
|
|
10
|
+
&:not(:first-child)
|
|
11
|
+
border-left: 10px solid transparent
|
|
12
|
+
&:not(:last-child)
|
|
13
|
+
border-right: 10px solid transparent
|
|
14
|
+
&-box
|
|
15
|
+
height: 168px
|
|
16
|
+
padding: 5px
|
|
17
|
+
white-space: nowrap
|
|
18
|
+
&:hover
|
|
19
|
+
cursor: default
|
|
20
|
+
&:not(:hover)
|
|
21
|
+
background: #fff !important
|
|
22
|
+
&-color
|
|
23
|
+
height: 120px
|
|
24
|
+
border-radius: 2px 2px 0 0
|
|
25
|
+
&-text
|
|
26
|
+
+when('box:hover')
|
|
27
|
+
color: #fff
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Alerts
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{ page.title }}</h1>
|
|
6
|
+
|
|
7
|
+
<hr />
|
|
8
|
+
|
|
9
|
+
{% alert :info, Ten other people are also viewing tickets for this flight. %}
|
|
10
|
+
{% alert :success, Pack your bags! You'll be on the next flight to Hawaii. %}
|
|
11
|
+
{% alert :warning, There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible. %}
|
|
12
|
+
{% alert :error, This flight is now sold out. Let's get you on the next flight to Kauai. %}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Boxes
|
|
3
|
+
box_sizes: [xxs, xs, sm, md, lg, xl]
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<h1>{{ page.title }}</h1>
|
|
7
|
+
|
|
8
|
+
<hr />
|
|
9
|
+
|
|
10
|
+
<div class="box box-padding">
|
|
11
|
+
<h4>Default Box</h4>
|
|
12
|
+
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<hr />
|
|
16
|
+
|
|
17
|
+
<div class="box-link box-padding">
|
|
18
|
+
<h4>Linked Box</h4>
|
|
19
|
+
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<hr />
|
|
23
|
+
|
|
24
|
+
<div class="box-secondary box-padding">
|
|
25
|
+
<h4>Secondary Box</h4>
|
|
26
|
+
<p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<hr />
|
|
30
|
+
|
|
31
|
+
<h2>Boxes Sizes</h2>
|
|
32
|
+
|
|
33
|
+
{% for size in page.box_sizes %}
|
|
34
|
+
<div class="box box-{{ size }} margin-top-md">
|
|
35
|
+
<strong class="center text-lighter text-sm">.box-{{ size }}</strong>
|
|
36
|
+
</div>
|
|
37
|
+
{% endfor %}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Buttons
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{ page.title }}</h1>
|
|
6
|
+
|
|
7
|
+
<hr />
|
|
8
|
+
|
|
9
|
+
<h2>Button Types</h2>
|
|
10
|
+
<div class="box-padding align-center">
|
|
11
|
+
{% btn Default %}
|
|
12
|
+
{% btn Primary, :primary %}
|
|
13
|
+
{% btn Secondary, :secondary %}
|
|
14
|
+
{% btn Disabled, :disabled %}
|
|
15
|
+
</div>
|
|
16
|
+
<div class="box-secondary box-padding align-center bg-gray-dark">
|
|
17
|
+
{% btn Inverse, :inverse %}
|
|
18
|
+
{% btn Inverse, :inverse_secondary, class: 'margin-left-xs' %}
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<hr />
|
|
22
|
+
|
|
23
|
+
<h2>Button Sizes (default: md)</h2>
|
|
24
|
+
<div class="box-padding align-center">
|
|
25
|
+
{% btn XX-Small, :xxs %}
|
|
26
|
+
{% btn X-Small, :xs %}
|
|
27
|
+
{% btn Small, :sm %}
|
|
28
|
+
{% btn Medium, :md %}
|
|
29
|
+
{% btn Large, :lg %}
|
|
30
|
+
{% btn X-Large, :xl %}
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<h2>XX-Small, Responsive Buttons</h2>
|
|
34
|
+
<div class="box-padding align-center">
|
|
35
|
+
{% btn All Screens, :xxs %}
|
|
36
|
+
{% btn Tablets, :x1_xxs %}
|
|
37
|
+
{% btn Laptops, :x2_xxs %}
|
|
38
|
+
{% btn Wide Screens, :x3_xxs %}
|
|
39
|
+
{% btn Giant Screens, :x4_xxs %}
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<h2>X-Small, Responsive Buttons</h2>
|
|
43
|
+
<div class="box-padding align-center">
|
|
44
|
+
{% btn All Screens, :xs %}
|
|
45
|
+
{% btn Tablets, :x1_xs %}
|
|
46
|
+
{% btn Laptops, :x2_xs %}
|
|
47
|
+
{% btn Wide Screens, :x3_xs %}
|
|
48
|
+
{% btn Giant Screens, :x4_xs %}
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<h2>Small, Responsive Buttons</h2>
|
|
52
|
+
<div class="box-padding align-center">
|
|
53
|
+
{% btn All Screens, :sm %}
|
|
54
|
+
{% btn Tablets, :x1_sm %}
|
|
55
|
+
{% btn Laptops, :x2_sm %}
|
|
56
|
+
{% btn Wide Screens, :x3_sm %}
|
|
57
|
+
{% btn Giant Screens, :x4_sm %}
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<h2>Medium, Responsive Buttons (Default Size)</h2>
|
|
61
|
+
<div class="box-padding align-center">
|
|
62
|
+
{% btn All Screens %}
|
|
63
|
+
{% btn Tablets, :sm :x1_md %}
|
|
64
|
+
{% btn Laptops, :sm :x2_md %}
|
|
65
|
+
{% btn Wide Screens, :sm :x3_md %}
|
|
66
|
+
{% btn Giant Screens, :sm :x4_md %}
|
|
67
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Empty States
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{ page.title }}</h1>
|
|
6
|
+
|
|
7
|
+
<hr />
|
|
8
|
+
|
|
9
|
+
<div class="empty-container align-center">
|
|
10
|
+
<p class="empty-txt">Get started by creating your first project.</p>
|
|
11
|
+
{% btn Create Project, :primary, class: 'empty-cta' %}
|
|
12
|
+
</div>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Forms
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<h1>{{ page.title }}</h1>
|
|
6
|
+
|
|
7
|
+
<hr />
|
|
8
|
+
|
|
9
|
+
<div class="input-group">
|
|
10
|
+
<label class="label">Textbox</label>
|
|
11
|
+
<input type="text" class="input input-text" placeholder=".input-text" />
|
|
12
|
+
</div>
|
|
13
|
+
<div class="input-group">
|
|
14
|
+
<label class="label">Textbox</label>
|
|
15
|
+
<input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
|
|
16
|
+
</div>
|
|
17
|
+
<div class="input-group">
|
|
18
|
+
<label class="label">Connected Textboxes</label>
|
|
19
|
+
<input type="text" class="input input-text input-full input-text-connect-top" placeholder=".input-text-connect-top" />
|
|
20
|
+
<input type="text" class="input input-text input-full input-text-connect-middle" placeholder=".input-text-connect-middle" />
|
|
21
|
+
<input type="text" class="input input-text input-full input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
|
|
22
|
+
</div>
|
|
23
|
+
<div class="input-group">
|
|
24
|
+
<label class="label">Select Boxes</label>
|
|
25
|
+
<div class="input-select-container">
|
|
26
|
+
<select class="input input-select">
|
|
27
|
+
<option class="input-option-placeholder">.input-select</option>
|
|
28
|
+
{% for i in (1..10) %}
|
|
29
|
+
<option>{{ i }}</option>
|
|
30
|
+
{% endfor %}
|
|
31
|
+
</select>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="input-group">
|
|
35
|
+
<h2>Switches</h2>
|
|
36
|
+
<div class="col-container margin-top-xs">
|
|
37
|
+
<div class="col col-20">
|
|
38
|
+
<label class="label">Medium Switches</label>
|
|
39
|
+
<button class="input-switch-md"></button>
|
|
40
|
+
<button class="input-switch-md input-switch-true"></button>
|
|
41
|
+
<button class="input-switch-md input-switch-false"></button>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="col col-20">
|
|
44
|
+
<label class="label">Small Switches</label>
|
|
45
|
+
<button class="input-switch-sm"></button>
|
|
46
|
+
<button class="input-switch-sm input-switch-true"></button>
|
|
47
|
+
<button class="input-switch-sm input-switch-false"></button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<hr />
|
|
53
|
+
|
|
54
|
+
<div class="input-group">
|
|
55
|
+
<label class="label">Textbox</label>
|
|
56
|
+
<p class="label-note">Some critically important notes about this field.</p>
|
|
57
|
+
<input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<hr />
|
|
61
|
+
|
|
62
|
+
<h2 class="margin-bottom-xs">Input Boxes</h2>
|
|
63
|
+
<div class="input-box">
|
|
64
|
+
<input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<hr />
|
|
68
|
+
|
|
69
|
+
<h2>Form Errors</h2>
|
|
70
|
+
<div class="form-error-container">
|
|
71
|
+
<ul class="form-error-list">
|
|
72
|
+
<li class="form-error-item">
|
|
73
|
+
<span class="form-error-text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
|
|
74
|
+
</li>
|
|
75
|
+
<li class="form-error-item">
|
|
76
|
+
<span class="form-error-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>
|
|
77
|
+
</li>
|
|
78
|
+
<li class="form-error-item">
|
|
79
|
+
<span class="form-error-text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
</div>
|