bootstrap-bookingsync-sass 0.0.17 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
~~~
|