bootstrap-bookingsync-sass 0.0.17 → 0.0.18
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/assets/javascripts/bookingsync/stackable.js +49 -0
- data/assets/javascripts/bootstrap-bookingsync-sprockets.js +1 -0
- data/assets/stylesheets/_bootstrap-bookingsync.scss +1 -0
- data/assets/stylesheets/bookingsync/_colors.scss +1 -0
- data/assets/stylesheets/bookingsync/_dropdown.scss +8 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +58 -1
- data/assets/stylesheets/bookingsync/_variables.scss +30 -12
- data/docs/content/assets/stylesheets/_base.scss +6 -5
- data/docs/content/assets/stylesheets/_callout.scss +10 -1
- data/docs/content/components.html +7 -7
- data/docs/content/components/chosen.md +28 -22
- data/docs/content/components/dropdown.md +45 -0
- data/docs/content/components/menu.md +186 -103
- data/docs/content/components/sheet.md +256 -4
- data/docs/content/components/switch.md +15 -7
- data/docs/content/css.html +44 -18
- data/docs/content/css/forms.md +732 -590
- data/docs/content/css/helpers.md +37 -27
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 21d2d524808d44f87f035cedbe2f18e0b69cdbb6
|
|
4
|
+
data.tar.gz: 74904c26d2ff3abcf95e356b765c0b7e95388069
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 93ca3cf9e27bb4f8f9ca0bd032799f6c049722d4e3199efbc4be763b311a952ac58889b8f7d47201b67d8ae497e1a9ba088aac3efadda7238efa81272ce0551c
|
|
7
|
+
data.tar.gz: 46c634645ce5b473032ef696a3a44f59809047022a3b7d4b17a7d62ba98c42894e2df94e09aa5039dbb79d248aed10b396970ada39c200efc63ad88b1a1aba93
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
### Unreleased
|
|
2
2
|
|
|
3
|
+
### 0.0.18 - 2016-05-09
|
|
4
|
+
|
|
5
|
+
* improvement
|
|
6
|
+
* add `tabs` with improved design when first element of a `sheet`
|
|
7
|
+
* add `stackable.js`, used to auto-stack list or tabs to always fit on single lines
|
|
8
|
+
* improve dropdown style through new `dropdown` stylesheet file
|
|
9
|
+
* restructure docs examples
|
|
10
|
+
|
|
3
11
|
### 0.0.17 - 2016-04-08
|
|
4
12
|
|
|
5
13
|
* improvement
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* ========================================================================
|
|
2
|
+
* http://styleguide.bookingsync.com/javascript/#stackable
|
|
3
|
+
* ========================================================================
|
|
4
|
+
* Copyright 2016 BookingSync SAS.
|
|
5
|
+
* Licensed under MIT (https://github.com/BookingSync/styleguide/blob/master/LICENSE)
|
|
6
|
+
* ======================================================================== */
|
|
7
|
+
|
|
8
|
+
+function ($) {
|
|
9
|
+
'use strict';
|
|
10
|
+
|
|
11
|
+
var refreshStackable = function() {
|
|
12
|
+
$('ul[data-toggle="stackable"]').each(function (index, element) {
|
|
13
|
+
var $element = $(element);
|
|
14
|
+
var targetSelector = $element.data('target');
|
|
15
|
+
var $target = $element.find(targetSelector);
|
|
16
|
+
var totalWidth = $element.width();
|
|
17
|
+
var $targetList = $target.children('ul');
|
|
18
|
+
var targetListWidth, maxItemsWidth;
|
|
19
|
+
var currentWidth = 0;
|
|
20
|
+
|
|
21
|
+
// Get width of stacked tab
|
|
22
|
+
$target.removeClass('hide');
|
|
23
|
+
targetListWidth = $target.width();
|
|
24
|
+
maxItemsWidth = totalWidth - targetListWidth;
|
|
25
|
+
$target.addClass('hide');
|
|
26
|
+
|
|
27
|
+
// Bring back all items to the main list
|
|
28
|
+
$targetList.find('li').each(function(index, item) {
|
|
29
|
+
$element.append($(item).detach());
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Move items not fitting in the single line to the stacked list
|
|
33
|
+
$element.children('li:not(' + targetSelector + ')').each(function(index, item) {
|
|
34
|
+
var $item = $(item);
|
|
35
|
+
var itemWidth = $item.width();
|
|
36
|
+
|
|
37
|
+
if (currentWidth + itemWidth < maxItemsWidth) {
|
|
38
|
+
currentWidth += itemWidth;
|
|
39
|
+
} else {
|
|
40
|
+
$target.removeClass('hide');
|
|
41
|
+
$targetList.append($item.detach());
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
$(document).ready(refreshStackable);
|
|
48
|
+
$(window).resize(refreshStackable);
|
|
49
|
+
}(jQuery);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Sheet
|
|
2
2
|
//
|
|
3
3
|
// Custom wrapper to simulate a paper sheet container
|
|
4
|
-
|
|
5
4
|
.sheet {
|
|
6
5
|
width: auto;
|
|
7
6
|
position: relative;
|
|
@@ -10,6 +9,64 @@
|
|
|
10
9
|
border-radius: $sheet-border-radius;
|
|
11
10
|
margin: $sheet-margin;
|
|
12
11
|
padding: $sheet-padding;
|
|
12
|
+
|
|
13
|
+
& > .nav-tabs {
|
|
14
|
+
background-color: $sheet-navbar-tabs-bg;
|
|
15
|
+
margin: - $sheet-padding;
|
|
16
|
+
margin-bottom: $sheet-padding;
|
|
17
|
+
|
|
18
|
+
> li > a {
|
|
19
|
+
margin-right: 0;
|
|
20
|
+
border-top: 0;
|
|
21
|
+
border-radius: 0;
|
|
22
|
+
color: $gray;
|
|
23
|
+
|
|
24
|
+
&:hover {
|
|
25
|
+
color: $gray;
|
|
26
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
27
|
+
border-left: 1px solid transparent;
|
|
28
|
+
border-right: 1px solid transparent;
|
|
29
|
+
border-radius: 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
> li.active a {
|
|
34
|
+
color: $brand-primary;
|
|
35
|
+
background-color: $sheet-bg;
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
color: $brand-primary;
|
|
39
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
40
|
+
border-top: 0;
|
|
41
|
+
border-left: 1px solid $gray-lightest;
|
|
42
|
+
border-right: 1px solid $gray-lightest;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
> li:first-of-type a,
|
|
47
|
+
> li:first-of-type a:hover {
|
|
48
|
+
border-left: 1px solid transparent;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Dropdown
|
|
52
|
+
&.nav > li > a:focus,
|
|
53
|
+
.open > a,
|
|
54
|
+
.open > a:hover,
|
|
55
|
+
.open > a:focus {
|
|
56
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
57
|
+
border-color: transparent;
|
|
58
|
+
border-bottom-color: $gray-lightest;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
> .dropdown >.dropdown-menu {
|
|
62
|
+
border-top: 0;
|
|
63
|
+
background-color: $sheet-navbar-tabs-bg-hover;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
> .pull-right > .dropdown-menu {
|
|
67
|
+
right: -1px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
13
70
|
}
|
|
14
71
|
|
|
15
72
|
.sheet-header {
|
|
@@ -16,18 +16,19 @@ $gray-darker: $gray-base !default;
|
|
|
16
16
|
$gray-dark: rgba($gray-base, .75) !default;
|
|
17
17
|
$gray: rgba($gray-base, .75) !default;
|
|
18
18
|
$gray-light: rgba($gray-base, .5) !default;
|
|
19
|
-
$gray-lighter: rgba($gray-base, .25) !default;
|
|
20
|
-
$gray-lightest: rgba($gray-base, .15) !default;
|
|
19
|
+
$gray-lighter: #C7CCD8 !default; // rgba($gray-base, .25) !default;
|
|
20
|
+
$gray-lightest: #DDE0E8 !default; // rgba($gray-base, .15) !default;
|
|
21
21
|
|
|
22
22
|
//== Scaffolding
|
|
23
23
|
//
|
|
24
24
|
//## Settings for some of the most global styles.
|
|
25
25
|
$text-color: $gray-dark !default;
|
|
26
|
-
$body-bg:
|
|
26
|
+
$body-bg: $bs-lightpurple !default;
|
|
27
27
|
|
|
28
28
|
//== Typography
|
|
29
29
|
//
|
|
30
30
|
//## Font, line-height, and color for body text, headings, and more.
|
|
31
|
+
$line-height: 1.5 !default;
|
|
31
32
|
$font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif !default;
|
|
32
33
|
$font-family-base: $font-family-sans-serif !default;
|
|
33
34
|
$font-size-base: 14px !default;
|
|
@@ -37,6 +38,9 @@ $font-size-h3: 18px !default;
|
|
|
37
38
|
$font-size-h4: 16px !default;
|
|
38
39
|
$headings-color: $bs-darkgray !default;
|
|
39
40
|
|
|
41
|
+
$dl-horizontal-breakpoint: 768px !default;
|
|
42
|
+
$dl-horizontal-narrow-offset: 120px !default;
|
|
43
|
+
|
|
40
44
|
//== Iconography
|
|
41
45
|
//
|
|
42
46
|
//## Specify custom location and filename of the included Smiles icon font.
|
|
@@ -181,22 +185,36 @@ $table-caption-color: $gray !default;
|
|
|
181
185
|
//
|
|
182
186
|
$sheet-bg: #fff !default;
|
|
183
187
|
$sheet-border: $gray-lighter !default;
|
|
184
|
-
$sheet-border-radius:
|
|
188
|
+
$sheet-border-radius: $border-radius-large !default;
|
|
185
189
|
$sheet-margin: ($grid-gutter-width / 2) !default;
|
|
186
190
|
$sheet-padding: $sheet-margin !default;
|
|
187
191
|
$sheet-inner-border: $gray-lightest !default;
|
|
188
192
|
|
|
189
193
|
|
|
194
|
+
//== Sheet Tabs
|
|
195
|
+
//
|
|
196
|
+
$sheet-navbar-tabs-bg: $bs-lightpurple !default;
|
|
197
|
+
$sheet-navbar-tabs-bg-hover: #FAFBFC !default; // rgba(255, 255, 255, 0.75);
|
|
198
|
+
|
|
199
|
+
|
|
190
200
|
//== Switch
|
|
191
201
|
//
|
|
192
|
-
$switch-label-size:
|
|
193
|
-
$switch-off-border:
|
|
194
|
-
$switch-off-bg:
|
|
195
|
-
$switch-off-color:
|
|
202
|
+
$switch-label-size: 10px !default;
|
|
203
|
+
$switch-off-border: $gray-lighter !default;
|
|
204
|
+
$switch-off-bg: #fff !default;
|
|
205
|
+
$switch-off-color: $gray-lightest !default;
|
|
196
206
|
|
|
197
207
|
|
|
198
|
-
//==
|
|
208
|
+
//== Dropdown
|
|
199
209
|
//
|
|
200
|
-
$
|
|
201
|
-
$
|
|
202
|
-
$
|
|
210
|
+
$dropdown-border: $gray-lighter !default;
|
|
211
|
+
$dropdown-fallback-border: $bs-lightpurple !default;
|
|
212
|
+
$dropdown-divider-bg: $gray-lightest !default;
|
|
213
|
+
$dropdown-link-color: $gray-dark !default;
|
|
214
|
+
$dropdown-link-hover-color: $gray-dark !default;
|
|
215
|
+
$dropdown-link-hover-bg: $bs-lightpurple !default;
|
|
216
|
+
$dropdown-link-active-color: $gray-dark !default;
|
|
217
|
+
$dropdown-link-active-bg: $gray-dark !default;
|
|
218
|
+
$dropdown-link-disabled-color: $gray-light !default;
|
|
219
|
+
$dropdown-header-color: $gray-light !default;
|
|
220
|
+
$dropdown-border-radius: $border-radius-large !default;
|
|
@@ -21,14 +21,15 @@ body {
|
|
|
21
21
|
padding-bottom: 40px;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.reference-body
|
|
25
|
-
.reference-body
|
|
26
|
-
.reference-body
|
|
27
|
-
.reference-body
|
|
24
|
+
.reference-body > h2,
|
|
25
|
+
.reference-body > h3,
|
|
26
|
+
.reference-body > h4,
|
|
27
|
+
.reference-body > h5,
|
|
28
|
+
.reference-body > h6 {
|
|
28
29
|
margin-top: 2em;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
.reference-body h3+h4 {
|
|
32
|
+
.reference-body > h3+h4 {
|
|
32
33
|
margin-top: 1em;
|
|
33
34
|
}
|
|
34
35
|
|
|
@@ -9,17 +9,21 @@
|
|
|
9
9
|
.bs-callout {
|
|
10
10
|
padding: 20px;
|
|
11
11
|
margin: 20px 0;
|
|
12
|
-
border: 1px solid #
|
|
12
|
+
border: 1px solid #C7CCD8;
|
|
13
13
|
border-left-width: 5px;
|
|
14
14
|
border-radius: 3px;
|
|
15
|
+
background-color: #fff;
|
|
15
16
|
}
|
|
17
|
+
|
|
16
18
|
.bs-callout h4 {
|
|
17
19
|
margin-top: 0;
|
|
18
20
|
margin-bottom: 5px;
|
|
19
21
|
}
|
|
22
|
+
|
|
20
23
|
.bs-callout p:last-child {
|
|
21
24
|
margin-bottom: 0;
|
|
22
25
|
}
|
|
26
|
+
|
|
23
27
|
.bs-callout code {
|
|
24
28
|
border-radius: 3px;
|
|
25
29
|
}
|
|
@@ -33,18 +37,23 @@
|
|
|
33
37
|
.bs-callout-danger {
|
|
34
38
|
border-left-color: #ce4844;
|
|
35
39
|
}
|
|
40
|
+
|
|
36
41
|
.bs-callout-danger h4 {
|
|
37
42
|
color: #ce4844;
|
|
38
43
|
}
|
|
44
|
+
|
|
39
45
|
.bs-callout-warning {
|
|
40
46
|
border-left-color: #aa6708;
|
|
41
47
|
}
|
|
48
|
+
|
|
42
49
|
.bs-callout-warning h4 {
|
|
43
50
|
color: #aa6708;
|
|
44
51
|
}
|
|
52
|
+
|
|
45
53
|
.bs-callout-info {
|
|
46
54
|
border-left-color: #1b809e;
|
|
47
55
|
}
|
|
56
|
+
|
|
48
57
|
.bs-callout-info h4 {
|
|
49
58
|
color: #1b809e;
|
|
50
59
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
<div class="panel panel-default">
|
|
4
4
|
<div class="list-group">
|
|
5
5
|
<%= link_to("Menu", "#menu", class: "list-group-item") %>
|
|
6
|
+
<%= link_to("Dropdown", "#dropdown", class: "list-group-item") %>
|
|
6
7
|
<%= link_to("Sheet", "#sheet", class: "list-group-item") %>
|
|
7
8
|
<%= link_to("Chosen", "#chosen", class: "list-group-item") %>
|
|
8
9
|
<%= link_to("Switch", "#switch", class: "list-group-item") %>
|
|
@@ -11,13 +12,12 @@
|
|
|
11
12
|
</div>
|
|
12
13
|
|
|
13
14
|
<div class="col-md-9 col-md-pull-3">
|
|
14
|
-
<div class="
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</div>
|
|
15
|
+
<div class="reference-body">
|
|
16
|
+
<%= items['/components/menu/'].compiled_content %>
|
|
17
|
+
<%= items['/components/dropdown/'].compiled_content %>
|
|
18
|
+
<%= items['/components/sheet/'].compiled_content %>
|
|
19
|
+
<%= items['/components/chosen/'].compiled_content %>
|
|
20
|
+
<%= items['/components/switch/'].compiled_content %>
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
# Chosen
|
|
2
2
|
|
|
3
3
|
<div class="bs-callout bs-callout-danger">
|
|
4
4
|
<h4>External dependency</h4>
|
|
@@ -6,21 +6,24 @@
|
|
|
6
6
|
This component requires the
|
|
7
7
|
<a href="http://harvesthq.github.io/chosen/">Chosen</a> library.
|
|
8
8
|
</p>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
Custom styles for select boxes provided by
|
|
12
|
-
[Chosen](http://harvesthq.github.io/chosen/).
|
|
13
9
|
|
|
14
|
-
|
|
10
|
+
<p>Custom styles for select boxes provided by
|
|
11
|
+
<a href="http://harvesthq.github.io/chosen/">Chosen</a>.</p>
|
|
12
|
+
</div>
|
|
15
13
|
|
|
16
14
|
<div class="example">
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
<div class="sheet-header">
|
|
16
|
+
<h3 id="chosen-example">Standard Select</h3>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="bs-example bs-sheet" data-example-id="chosen-example">
|
|
19
|
+
<select class="form-control chosen">
|
|
20
|
+
<option value=""></option>
|
|
21
|
+
<option value="One">One</option>
|
|
22
|
+
<option value="Two">Two</option>
|
|
23
|
+
<option value="Three">Three</option>
|
|
24
|
+
<option value="Four">Four</option>
|
|
25
|
+
</select>
|
|
26
|
+
</div>
|
|
24
27
|
</div>
|
|
25
28
|
~~~ HTML
|
|
26
29
|
<select class="form-control chosen">
|
|
@@ -32,16 +35,19 @@ Custom styles for select boxes provided by
|
|
|
32
35
|
</select>
|
|
33
36
|
~~~
|
|
34
37
|
|
|
35
|
-
### Multiple Select
|
|
36
|
-
|
|
37
38
|
<div class="example">
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
<div class="sheet-header">
|
|
40
|
+
<h3 id="chosen-example-multiselect">Multiple Select</h3>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="bs-example bs-sheet" data-example-id="chosen-example-multiselect">
|
|
43
|
+
<select class="form-control chosen" multiple tabindex="3">
|
|
44
|
+
<option value=""></option>
|
|
45
|
+
<option value="One">One</option>
|
|
46
|
+
<option value="Two">Two</option>
|
|
47
|
+
<option value="Three">Three</option>
|
|
48
|
+
<option value="Four">Four</option>
|
|
49
|
+
</select>
|
|
50
|
+
</div>
|
|
45
51
|
</div>
|
|
46
52
|
~~~ HTML
|
|
47
53
|
<select class="form-control chosen" multiple tabindex="3">
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Dropdown
|
|
2
|
+
|
|
3
|
+
<div class="example">
|
|
4
|
+
<div class="sheet-header">
|
|
5
|
+
<h3 id="dropdown-example">Basic example</h3>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="bs-example bs-sheet" data-example-id="dropdown-example">
|
|
8
|
+
<div class="dropdown">
|
|
9
|
+
<button class="btn btn-default dropdown-toggle" type="button"
|
|
10
|
+
id="dropdownMenu1" data-toggle="dropdown"
|
|
11
|
+
aria-haspopup="true" aria-expanded="true">
|
|
12
|
+
Dropdown
|
|
13
|
+
<span class="caret"></span>
|
|
14
|
+
</button>
|
|
15
|
+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
|
16
|
+
<li class="dropdown-header">Dropdown header</li>
|
|
17
|
+
<li><a href="#">Action</a></li>
|
|
18
|
+
<li class="disabled"><a href="#">Disabled link</a></li>
|
|
19
|
+
<li><a href="#">Something else here</a></li>
|
|
20
|
+
<li role="separator" class="divider"> </li>
|
|
21
|
+
<li class="dropdown-header">Dropdown header</li>
|
|
22
|
+
<li><a href="#">Separated link</a></li>
|
|
23
|
+
</ul>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
~~~ html
|
|
28
|
+
<div class="dropdown">
|
|
29
|
+
<button class="btn btn-default dropdown-toggle" type="button"
|
|
30
|
+
id="dropdownMenu1" data-toggle="dropdown"
|
|
31
|
+
aria-haspopup="true" aria-expanded="true">
|
|
32
|
+
Dropdown
|
|
33
|
+
<span class="caret"></span>
|
|
34
|
+
</button>
|
|
35
|
+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
|
36
|
+
<li class="dropdown-header">Dropdown header</li>
|
|
37
|
+
<li><a href="#">Action</a></li>
|
|
38
|
+
<li class="disabled"><a href="#">Disabled link</a></li>
|
|
39
|
+
<li><a href="#">Something else here</a></li>
|
|
40
|
+
<li role="separator" class="divider"> </li>
|
|
41
|
+
<li class="dropdown-header">Dropdown header</li>
|
|
42
|
+
<li><a href="#">Separated link</a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
~~~
|