effective_style_guide 1.5.5 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/README.md +13 -9
  4. data/app/controllers/effective/style_guide_controller.rb +17 -2
  5. data/app/models/effective/style_guide.rb +14 -2
  6. data/app/views/effective/style_guide/_alerts.html +45 -0
  7. data/app/views/effective/style_guide/_badges.html +45 -0
  8. data/app/views/effective/style_guide/_breadcrumbs.html +20 -0
  9. data/app/views/effective/style_guide/_buttons.html +87 -0
  10. data/app/views/effective/style_guide/_buttons_group.html +90 -0
  11. data/app/views/effective/style_guide/_cards.html +496 -0
  12. data/app/views/effective/style_guide/_collapse.html +85 -0
  13. data/app/views/effective/style_guide/_dropdowns.html +177 -0
  14. data/app/views/effective/style_guide/_form_with.html.haml +77 -0
  15. data/app/views/effective/style_guide/_input_groups.html +300 -0
  16. data/app/views/effective/style_guide/_jumbotrons.html +18 -0
  17. data/app/views/effective/style_guide/_list_groups.html +156 -0
  18. data/app/views/effective/style_guide/_modals.html +81 -0
  19. data/app/views/effective/style_guide/_navs.html +204 -0
  20. data/app/views/effective/style_guide/_pagination.html +126 -0
  21. data/app/views/effective/style_guide/_progress.html +120 -0
  22. data/app/views/effective/style_guide/show.html.haml +14 -80
  23. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_alerts.html.haml +0 -0
  24. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_breadcrumbs.html.haml +0 -0
  25. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_buttons.html.haml +0 -0
  26. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_horizontal.html.haml +0 -0
  27. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_inline.html.haml +0 -0
  28. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_vertical.html.haml +0 -0
  29. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_jumbotron.html.haml +0 -0
  30. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_labels.html.haml +0 -0
  31. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_list_groups.html.haml +0 -0
  32. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_modals.html.haml +0 -0
  33. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_navs.html.haml +0 -0
  34. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_pagination.html.haml +0 -0
  35. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_panels.html.haml +0 -0
  36. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_progress_bars.html.haml +0 -0
  37. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_tables.html.haml +0 -0
  38. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_thumbnails.html.haml +3 -2
  39. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_typography.html.haml +0 -0
  40. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_wells.html.haml +0 -0
  41. data/app/views/effective/style_guide_bootstrap3/show.html.haml +89 -0
  42. data/config/effective_style_guide.rb +14 -14
  43. data/config/routes.rb +2 -3
  44. data/lib/effective_style_guide.rb +20 -6
  45. data/lib/effective_style_guide/version.rb +1 -1
  46. metadata +41 -56
  47. data/Rakefile +0 -20
  48. data/app/datatables/effective_style_guide_datatable.rb +0 -45
  49. data/app/models/effective/datatables/style_guide.rb +0 -55
  50. data/app/views/effective/style_guide/_effective_datatable.html.haml +0 -9
data/app/views/effective/style_guide/_collapse.html ADDED
@@ -0,0 +1,85 @@
1
+ <p>
2
+ <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
3
+ Link with href
4
+ </a>
5
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
6
+ Button with data-target
7
+ </button>
8
+ </p>
9
+ <div class="collapse" id="collapseExample">
10
+ <div class="card card-body">
11
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
12
+ </div>
13
+ </div>
14
+
15
+ <br>
16
+
17
+ <p>
18
+ <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
19
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
20
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
21
+ </p>
22
+ <div class="row">
23
+ <div class="col">
24
+ <div class="collapse multi-collapse" id="multiCollapseExample1">
25
+ <div class="card card-body">
26
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
27
+ </div>
28
+ </div>
29
+ </div>
30
+ <div class="col">
31
+ <div class="collapse multi-collapse" id="multiCollapseExample2">
32
+ <div class="card card-body">
33
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </div>
38
+
39
+ <br>
40
+
41
+ <div id="accordion">
42
+ <div class="card">
43
+ <div class="card-header" id="headingOne">
44
+ <h5 class="mb-0">
45
+ <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
46
+ Collapsible Group Item #1
47
+ </button>
48
+ </h5>
49
+ </div>
50
+
51
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
52
+ <div class="card-body">
53
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
54
+ </div>
55
+ </div>
56
+ </div>
57
+ <div class="card">
58
+ <div class="card-header" id="headingTwo">
59
+ <h5 class="mb-0">
60
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
61
+ Collapsible Group Item #2
62
+ </button>
63
+ </h5>
64
+ </div>
65
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
66
+ <div class="card-body">
67
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <div class="card">
72
+ <div class="card-header" id="headingThree">
73
+ <h5 class="mb-0">
74
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
75
+ Collapsible Group Item #3
76
+ </button>
77
+ </h5>
78
+ </div>
79
+ <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
80
+ <div class="card-body">
81
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
data/app/views/effective/style_guide/_dropdowns.html ADDED
@@ -0,0 +1,177 @@
1
+ <div class="dropdown">
2
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3
+ Dropdown button
4
+ </button>
5
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
6
+ <a class="dropdown-item" href="#">Action</a>
7
+ <a class="dropdown-item" href="#">Another action</a>
8
+ <a class="dropdown-item" href="#">Something else here</a>
9
+ </div>
10
+ </div>
11
+
12
+ <p><br></p>
13
+
14
+ <div class="dropdown show">
15
+ <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
16
+ Dropdown link
17
+ </a>
18
+
19
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
20
+ <a class="dropdown-item" href="#">Action</a>
21
+ <a class="dropdown-item" href="#">Another action</a>
22
+ <a class="dropdown-item" href="#">Something else here</a>
23
+ </div>
24
+ </div>
25
+
26
+ <p><br></p>
27
+
28
+ <div class="btn-group">
29
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
30
+ Action
31
+ </button>
32
+ <div class="dropdown-menu">
33
+ <a class="dropdown-item" href="#">Action</a>
34
+ <a class="dropdown-item" href="#">Another action</a>
35
+ <a class="dropdown-item" href="#">Something else here</a>
36
+ <div class="dropdown-divider"></div>
37
+ <a class="dropdown-item" href="#">Separated link</a>
38
+ </div>
39
+ </div>
40
+
41
+ <p><br></p>
42
+
43
+ <div class="btn-group">
44
+ <button type="button" class="btn btn-danger">Action</button>
45
+ <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
46
+ <span class="sr-only">Toggle Dropdown</span>
47
+ </button>
48
+ <div class="dropdown-menu">
49
+ <a class="dropdown-item" href="#">Action</a>
50
+ <a class="dropdown-item" href="#">Another action</a>
51
+ <a class="dropdown-item" href="#">Something else here</a>
52
+ <div class="dropdown-divider"></div>
53
+ <a class="dropdown-item" href="#">Separated link</a>
54
+ </div>
55
+ </div>
56
+
57
+ <p><br></p>
58
+
59
+ <!-- Large button groups (default and split) -->
60
+ <div class="btn-group">
61
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
62
+ Large button
63
+ </button>
64
+ <div class="dropdown-menu">
65
+ ...
66
+ </div>
67
+ </div>
68
+ <div class="btn-group">
69
+ <button class="btn btn-secondary btn-lg" type="button">
70
+ Large split button
71
+ </button>
72
+ <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
73
+ <span class="sr-only">Toggle Dropdown</span>
74
+ </button>
75
+ <div class="dropdown-menu">
76
+ ...
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Small button groups (default and split) -->
81
+ <div class="btn-group">
82
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
83
+ Small button
84
+ </button>
85
+ <div class="dropdown-menu">
86
+ ...
87
+ </div>
88
+ </div>
89
+ <div class="btn-group">
90
+ <button class="btn btn-secondary btn-sm" type="button">
91
+ Small split button
92
+ </button>
93
+ <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
94
+ <span class="sr-only">Toggle Dropdown</span>
95
+ </button>
96
+ <div class="dropdown-menu">
97
+ ...
98
+ </div>
99
+ </div>
100
+
101
+ <p><br></p>
102
+
103
+ <!-- Default dropup button -->
104
+ <div class="btn-group dropup">
105
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
106
+ Dropup
107
+ </button>
108
+ <div class="dropdown-menu">
109
+ <!-- Dropdown menu links -->
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Split dropup button -->
114
+ <div class="btn-group dropup">
115
+ <button type="button" class="btn btn-secondary">
116
+ Split dropup
117
+ </button>
118
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
119
+ <span class="sr-only">Toggle Dropdown</span>
120
+ </button>
121
+ <div class="dropdown-menu">
122
+ <!-- Dropdown menu links -->
123
+ </div>
124
+ </div>
125
+
126
+
127
+ <p><br></p>
128
+
129
+ <!-- Default dropright button -->
130
+ <div class="btn-group dropright">
131
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
132
+ Dropright
133
+ </button>
134
+ <div class="dropdown-menu">
135
+ <!-- Dropdown menu links -->
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Split dropright button -->
140
+ <div class="btn-group dropright">
141
+ <button type="button" class="btn btn-secondary">
142
+ Split dropright
143
+ </button>
144
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
145
+ <span class="sr-only">Toggle Dropright</span>
146
+ </button>
147
+ <div class="dropdown-menu">
148
+ <!-- Dropdown menu links -->
149
+ </div>
150
+ </div>
151
+
152
+ <p><br></p>
153
+
154
+ <!-- Default dropleft button -->
155
+ <div class="btn-group dropleft">
156
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
157
+ Dropleft
158
+ </button>
159
+ <div class="dropdown-menu">
160
+ <!-- Dropdown menu links -->
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Split dropleft button -->
165
+ <div class="btn-group">
166
+ <div class="btn-group dropleft" role="group">
167
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
168
+ <span class="sr-only">Toggle Dropleft</span>
169
+ </button>
170
+ <div class="dropdown-menu">
171
+ <!-- Dropdown menu links -->
172
+ </div>
173
+ </div>
174
+ <button type="button" class="btn btn-secondary">
175
+ Split dropleft
176
+ </button>
177
+ </div>
data/app/views/effective/style_guide/_form_with.html.haml ADDED
@@ -0,0 +1,77 @@
1
+ = form_with model: Effective::StyleGuide.new, url: '/' do |f|
2
+ %p
3
+ %label Text Field
4
+ = f.text_field :title
5
+
6
+ %p
7
+ %label Password
8
+ = f.password_field :password
9
+
10
+ %p
11
+ %label Checkbox
12
+ = f.check_box :archived
13
+
14
+ %p
15
+ %label Radio
16
+ = f.radio_button :archived, true
17
+ = f.radio_button :archived, false
18
+
19
+ %p
20
+ %label Date Field
21
+ = f.date_field :updated_at
22
+
23
+ %p
24
+ %label DateField
25
+ = f.datetime_field :updated_at
26
+
27
+ %p
28
+ %label Time
29
+ = f.time_field :updated_at
30
+
31
+ %p
32
+ %label Email
33
+ = f.email_field :email
34
+
35
+ %p
36
+ %label Telephone Field
37
+ = f.telephone_field :phone
38
+
39
+ %p
40
+ %label Url Field
41
+ = f.url_field :url
42
+
43
+ %p
44
+ %label File Field
45
+ = f.file_field :url
46
+
47
+ %p
48
+ %label Color
49
+ = f.color_field :email
50
+
51
+ %p
52
+ %label Select
53
+ = f.select :color, EffectiveStyleGuide.colors
54
+
55
+ %p
56
+ %label Multiple Select
57
+ = f.select :color, options_from_collection_for_select(EffectiveStyleGuide.colors, :to_s, :to_s, select: f.object.category), multiple: true
58
+
59
+ %p
60
+ %label Grouped Select
61
+ = f.select :color, EffectiveStyleGuide.grouped_colors
62
+
63
+ %p
64
+ %label Text Area
65
+ = f.text_area :title
66
+
67
+ %p
68
+ %label Collection Select
69
+ = f.collection_select :color, EffectiveStyleGuide.colors, :to_s, :to_s
70
+
71
+ %p
72
+ %label Collection Radio Buttons
73
+ = f.collection_radio_buttons :color, EffectiveStyleGuide.colors, :to_s, :to_s
74
+
75
+ %p
76
+ %label Collection Check Boxes
77
+ = f.collection_check_boxes :color, EffectiveStyleGuide.colors, :to_s, :to_s
data/app/views/effective/style_guide/_input_groups.html ADDED
@@ -0,0 +1,300 @@
1
+ <div class="input-group mb-3">
2
+ <div class="input-group-prepend">
3
+ <span class="input-group-text" id="basic-addon1">@</span>
4
+ </div>
5
+ <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
6
+ </div>
7
+
8
+ <div class="input-group mb-3">
9
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
10
+ <div class="input-group-append">
11
+ <span class="input-group-text" id="basic-addon2">@example.com</span>
12
+ </div>
13
+ </div>
14
+
15
+ <label for="basic-url">Your vanity URL</label>
16
+ <div class="input-group mb-3">
17
+ <div class="input-group-prepend">
18
+ <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
19
+ </div>
20
+ <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
21
+ </div>
22
+
23
+ <div class="input-group mb-3">
24
+ <div class="input-group-prepend">
25
+ <span class="input-group-text">$</span>
26
+ </div>
27
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
28
+ <div class="input-group-append">
29
+ <span class="input-group-text">.00</span>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="input-group">
34
+ <div class="input-group-prepend">
35
+ <span class="input-group-text">With textarea</span>
36
+ </div>
37
+ <textarea class="form-control" aria-label="With textarea"></textarea>
38
+ </div>
39
+
40
+ <p><br></p>
41
+
42
+ <div class="input-group input-group-sm mb-3">
43
+ <div class="input-group-prepend">
44
+ <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
45
+ </div>
46
+ <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
47
+ </div>
48
+
49
+ <div class="input-group mb-3">
50
+ <div class="input-group-prepend">
51
+ <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
52
+ </div>
53
+ <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
54
+ </div>
55
+
56
+ <div class="input-group input-group-lg">
57
+ <div class="input-group-prepend">
58
+ <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
59
+ </div>
60
+ <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
61
+ </div>
62
+
63
+ <p><br></p>
64
+
65
+ <div class="input-group mb-3">
66
+ <div class="input-group-prepend">
67
+ <div class="input-group-text">
68
+ <input type="checkbox" aria-label="Checkbox for following text input">
69
+ </div>
70
+ </div>
71
+ <input type="text" class="form-control" aria-label="Text input with checkbox">
72
+ </div>
73
+
74
+ <div class="input-group">
75
+ <div class="input-group-prepend">
76
+ <div class="input-group-text">
77
+ <input type="radio" aria-label="Radio button for following text input">
78
+ </div>
79
+ </div>
80
+ <input type="text" class="form-control" aria-label="Text input with radio button">
81
+ </div>
82
+
83
+ <p><br></p>
84
+
85
+ <div class="input-group">
86
+ <div class="input-group-prepend">
87
+ <span class="input-group-text" id="">First and last name</span>
88
+ </div>
89
+ <input type="text" class="form-control">
90
+ <input type="text" class="form-control">
91
+ </div>
92
+
93
+ <p><br></p>
94
+
95
+ <div class="input-group mb-3">
96
+ <div class="input-group-prepend">
97
+ <span class="input-group-text">$</span>
98
+ <span class="input-group-text">0.00</span>
99
+ </div>
100
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
101
+ </div>
102
+
103
+ <div class="input-group">
104
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
105
+ <div class="input-group-append">
106
+ <span class="input-group-text">$</span>
107
+ <span class="input-group-text">0.00</span>
108
+ </div>
109
+ </div>
110
+
111
+ <p><br></p>
112
+
113
+ <div class="input-group mb-3">
114
+ <div class="input-group-prepend">
115
+ <button class="btn btn-outline-secondary" type="button">Button</button>
116
+ </div>
117
+ <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
118
+ </div>
119
+
120
+ <div class="input-group mb-3">
121
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
122
+ <div class="input-group-append">
123
+ <button class="btn btn-outline-secondary" type="button">Button</button>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="input-group mb-3">
128
+ <div class="input-group-prepend">
129
+ <button class="btn btn-outline-secondary" type="button">Button</button>
130
+ <button class="btn btn-outline-secondary" type="button">Button</button>
131
+ </div>
132
+ <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
133
+ </div>
134
+
135
+ <div class="input-group">
136
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
137
+ <div class="input-group-append">
138
+ <button class="btn btn-outline-secondary" type="button">Button</button>
139
+ <button class="btn btn-outline-secondary" type="button">Button</button>
140
+ </div>
141
+ </div>
142
+
143
+ <p><br></p>
144
+
145
+ <div class="input-group mb-3">
146
+ <div class="input-group-prepend">
147
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
148
+ <div class="dropdown-menu">
149
+ <a class="dropdown-item" href="#">Action</a>
150
+ <a class="dropdown-item" href="#">Another action</a>
151
+ <a class="dropdown-item" href="#">Something else here</a>
152
+ <div role="separator" class="dropdown-divider"></div>
153
+ <a class="dropdown-item" href="#">Separated link</a>
154
+ </div>
155
+ </div>
156
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
157
+ </div>
158
+
159
+ <div class="input-group">
160
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
161
+ <div class="input-group-append">
162
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
163
+ <div class="dropdown-menu">
164
+ <a class="dropdown-item" href="#">Action</a>
165
+ <a class="dropdown-item" href="#">Another action</a>
166
+ <a class="dropdown-item" href="#">Something else here</a>
167
+ <div role="separator" class="dropdown-divider"></div>
168
+ <a class="dropdown-item" href="#">Separated link</a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <p><br></p>
174
+
175
+ <div class="input-group mb-3">
176
+ <div class="input-group-prepend">
177
+ <button type="button" class="btn btn-outline-secondary">Action</button>
178
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
179
+ <span class="sr-only">Toggle Dropdown</span>
180
+ </button>
181
+ <div class="dropdown-menu">
182
+ <a class="dropdown-item" href="#">Action</a>
183
+ <a class="dropdown-item" href="#">Another action</a>
184
+ <a class="dropdown-item" href="#">Something else here</a>
185
+ <div role="separator" class="dropdown-divider"></div>
186
+ <a class="dropdown-item" href="#">Separated link</a>
187
+ </div>
188
+ </div>
189
+ <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
190
+ </div>
191
+
192
+ <div class="input-group">
193
+ <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
194
+ <div class="input-group-append">
195
+ <button type="button" class="btn btn-outline-secondary">Action</button>
196
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
197
+ <span class="sr-only">Toggle Dropdown</span>
198
+ </button>
199
+ <div class="dropdown-menu">
200
+ <a class="dropdown-item" href="#">Action</a>
201
+ <a class="dropdown-item" href="#">Another action</a>
202
+ <a class="dropdown-item" href="#">Something else here</a>
203
+ <div role="separator" class="dropdown-divider"></div>
204
+ <a class="dropdown-item" href="#">Separated link</a>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <p><br></p>
210
+
211
+ <div class="input-group mb-3">
212
+ <div class="input-group-prepend">
213
+ <label class="input-group-text" for="inputGroupSelect01">Options</label>
214
+ </div>
215
+ <select class="custom-select" id="inputGroupSelect01">
216
+ <option selected>Choose...</option>
217
+ <option value="1">One</option>
218
+ <option value="2">Two</option>
219
+ <option value="3">Three</option>
220
+ </select>
221
+ </div>
222
+
223
+ <div class="input-group mb-3">
224
+ <select class="custom-select" id="inputGroupSelect02">
225
+ <option selected>Choose...</option>
226
+ <option value="1">One</option>
227
+ <option value="2">Two</option>
228
+ <option value="3">Three</option>
229
+ </select>
230
+ <div class="input-group-append">
231
+ <label class="input-group-text" for="inputGroupSelect02">Options</label>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="input-group mb-3">
236
+ <div class="input-group-prepend">
237
+ <button class="btn btn-outline-secondary" type="button">Button</button>
238
+ </div>
239
+ <select class="custom-select" id="inputGroupSelect03">
240
+ <option selected>Choose...</option>
241
+ <option value="1">One</option>
242
+ <option value="2">Two</option>
243
+ <option value="3">Three</option>
244
+ </select>
245
+ </div>
246
+
247
+ <div class="input-group">
248
+ <select class="custom-select" id="inputGroupSelect04">
249
+ <option selected>Choose...</option>
250
+ <option value="1">One</option>
251
+ <option value="2">Two</option>
252
+ <option value="3">Three</option>
253
+ </select>
254
+ <div class="input-group-append">
255
+ <button class="btn btn-outline-secondary" type="button">Button</button>
256
+ </div>
257
+ </div>
258
+
259
+ <p><br></p>
260
+
261
+ <div class="input-group mb-3">
262
+ <div class="input-group-prepend">
263
+ <span class="input-group-text">Upload</span>
264
+ </div>
265
+ <div class="custom-file">
266
+ <input type="file" class="custom-file-input" id="inputGroupFile01">
267
+ <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="input-group mb-3">
272
+ <div class="custom-file">
273
+ <input type="file" class="custom-file-input" id="inputGroupFile02">
274
+ <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
275
+ </div>
276
+ <div class="input-group-append">
277
+ <span class="input-group-text" id="">Upload</span>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="input-group mb-3">
282
+ <div class="input-group-prepend">
283
+ <button class="btn btn-outline-secondary" type="button">Button</button>
284
+ </div>
285
+ <div class="custom-file">
286
+ <input type="file" class="custom-file-input" id="inputGroupFile03">
287
+ <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="input-group">
292
+ <div class="custom-file">
293
+ <input type="file" class="custom-file-input" id="inputGroupFile04">
294
+ <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
295
+ </div>
296
+ <div class="input-group-append">
297
+ <button class="btn btn-outline-secondary" type="button">Button</button>
298
+ </div>
299
+ </div>
300
+