, or .
8 | .list-group {
9 | // No need to set list-style: none; since .list-group-item is block level
10 | margin-bottom: 20px;
11 | background: #fff;
12 | border-radius: 3px;
13 | box-shadow: 0 2px 0 rgba(0,0,0,0.1);
14 | padding-left: 0; // reset padding because ul and ol
15 | }
16 |
17 | // Individual list items
18 | // -------------------------
19 |
20 | .list-group-item {
21 | position: relative;
22 | display: block;
23 | padding: 10px 15px;
24 | // Place the border on the list items and negative margin up for better styling
25 | margin-bottom: -1px;
26 |
27 | // Round the first and last items
28 | &:first-child {
29 | .border-top-radius(@list-group-border-radius);
30 | }
31 | &:last-child {
32 | margin-bottom: 0;
33 | .border-bottom-radius(@list-group-border-radius);
34 | }
35 |
36 | // Align badges within list items
37 | > .badge {
38 | float: right;
39 | }
40 | > .badge + .badge {
41 | margin-right: 5px;
42 | }
43 | }
44 |
45 | // Linked list items
46 | a.list-group-item {
47 | color: @list-group-link-color;
48 |
49 | .list-group-item-heading {
50 | color: @list-group-link-heading-color;
51 | }
52 |
53 | // Hover state
54 | &:hover,
55 | &:focus {
56 | text-decoration: none;
57 | color: @list-group-active-bg;
58 | }
59 |
60 | // Active class on item itself, not parent
61 | &.active,
62 | &.active:hover,
63 | &.active:focus {
64 | z-index: 2; // Place active items above their siblings for proper border styling
65 | color: @list-group-active-bg;
66 |
67 | // Force color to inherit for custom content
68 | .list-group-item-heading {
69 | color: inherit;
70 | }
71 | .list-group-item-text {
72 | color: lighten(@list-group-active-bg, 40%);
73 | }
74 | }
75 | }
76 |
77 | // Custom content options
78 | // -------------------------
79 |
80 | .list-group-item-heading {
81 | margin-top: 0;
82 | margin-bottom: 5px;
83 | }
84 | .list-group-item-text {
85 | margin-bottom: 0;
86 | line-height: 1.3;
87 | }
88 |
--------------------------------------------------------------------------------
/public/demo/less/print.less:
--------------------------------------------------------------------------------
1 | //
2 | // Basic print styles
3 | // --------------------------------------------------
4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
5 |
6 | @media print {
7 |
8 | * {
9 | text-shadow: none !important;
10 | color: #000 !important; // Black prints faster: h5bp.com/s
11 | background: transparent !important;
12 | box-shadow: none !important;
13 | }
14 |
15 | a,
16 | a:visited {
17 | text-decoration: underline;
18 | }
19 |
20 | a[href]:after {
21 | content: " (" attr(href) ")";
22 | }
23 |
24 | abbr[title]:after {
25 | content: " (" attr(title) ")";
26 | }
27 |
28 | // Don't show links for images, or javascript/internal links
29 | a[href^="javascript:"]:after,
30 | a[href^="#"]:after {
31 | content: "";
32 | }
33 |
34 | pre,
35 | blockquote {
36 | border: 1px solid #999;
37 | page-break-inside: avoid;
38 | }
39 |
40 | thead {
41 | display: table-header-group; // h5bp.com/t
42 | }
43 |
44 | tr,
45 | img {
46 | page-break-inside: avoid;
47 | }
48 |
49 | img {
50 | max-width: 100% !important;
51 | }
52 |
53 | @page {
54 | margin: 2cm .5cm;
55 | }
56 |
57 | p,
58 | h2,
59 | h3 {
60 | orphans: 3;
61 | widows: 3;
62 | }
63 |
64 | h2,
65 | h3 {
66 | page-break-after: avoid;
67 | }
68 |
69 | // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
70 | // Once fixed, we can just straight up remove this.
71 | select {
72 | background: #fff !important;
73 | }
74 |
75 | // Bootstrap components
76 | .navbar {
77 | display: none;
78 | }
79 | .table {
80 | td,
81 | th {
82 | background-color: #fff !important;
83 | }
84 | }
85 | .btn,
86 | .dropup > .btn {
87 | > .caret {
88 | border-top-color: #000 !important;
89 | }
90 | }
91 | .label {
92 | border: 1px solid #000;
93 | }
94 |
95 | .table {
96 | border-collapse: collapse !important;
97 | }
98 | .table-bordered {
99 | th,
100 | td {
101 | border: 1px solid #ddd !important;
102 | }
103 | }
104 |
105 | }
106 |
--------------------------------------------------------------------------------
/public/demo/less/pagination.less:
--------------------------------------------------------------------------------
1 | //
2 | // Pagination (multiple pages)
3 | // --------------------------------------------------
4 | .pagination {
5 | display: inline-block;
6 | padding-left: 0;
7 | margin: @line-height-computed 0;
8 | border-radius: @border-radius-base;
9 |
10 | > li {
11 | display: inline; // Remove list-style and block-level defaults
12 | > a,
13 | > span {
14 | position: relative;
15 | float: left; // Collapse white-space
16 | padding: @padding-base-vertical @padding-base-horizontal;
17 | line-height: @line-height-base;
18 | text-decoration: none;
19 | background-color: @pagination-bg;
20 | border: 1px solid @pagination-border;
21 | margin-left: -1px;
22 | }
23 | &:first-child {
24 | > a,
25 | > span {
26 | margin-left: 0;
27 | .border-left-radius(@border-radius-base);
28 | }
29 | }
30 | &:last-child {
31 | > a,
32 | > span {
33 | .border-right-radius(@border-radius-base);
34 | }
35 | }
36 | }
37 |
38 | > li > a,
39 | > li > span {
40 | &:hover,
41 | &:focus {
42 | background-color: @pagination-hover-bg;
43 | }
44 | }
45 |
46 | > .active > a,
47 | > .active > span {
48 | &,
49 | &:hover,
50 | &:focus {
51 | z-index: 2;
52 | color: @pagination-active-color;
53 | background-color: @pagination-active-bg;
54 | border-color: @pagination-active-bg;
55 | cursor: default;
56 | }
57 | }
58 |
59 | > .disabled {
60 | > span,
61 | > span:hover,
62 | > span:focus,
63 | > a,
64 | > a:hover,
65 | > a:focus {
66 | color: @pagination-disabled-color;
67 | background-color: @pagination-bg;
68 | border-color: @pagination-border;
69 | cursor: not-allowed;
70 | }
71 | }
72 | }
73 |
74 | // Sizing
75 | // --------------------------------------------------
76 |
77 | // Large
78 | .pagination-lg {
79 | .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
80 | }
81 |
82 | // Small
83 | .pagination-sm {
84 | .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
85 | }
86 |
--------------------------------------------------------------------------------
/public/demo/less/progress-bars.less:
--------------------------------------------------------------------------------
1 | //
2 | // Progress bars
3 | // --------------------------------------------------
4 |
5 |
6 | // Bar animations
7 | // -------------------------
8 |
9 | // WebKit
10 | @-webkit-keyframes progress-bar-stripes {
11 | from { background-position: 40px 0; }
12 | to { background-position: 0 0; }
13 | }
14 |
15 | // Firefox
16 | @-moz-keyframes progress-bar-stripes {
17 | from { background-position: 40px 0; }
18 | to { background-position: 0 0; }
19 | }
20 |
21 | // Opera
22 | @-o-keyframes progress-bar-stripes {
23 | from { background-position: 0 0; }
24 | to { background-position: 40px 0; }
25 | }
26 |
27 | // Spec and IE10+
28 | @keyframes progress-bar-stripes {
29 | from { background-position: 40px 0; }
30 | to { background-position: 0 0; }
31 | }
32 |
33 |
34 |
35 | // Bar itself
36 | // -------------------------
37 |
38 | // Outer container
39 | .progress {
40 | overflow: hidden;
41 | height: @line-height-computed;
42 | margin-bottom: @line-height-computed;
43 | background-color: @progress-bg;
44 | border-radius: @border-radius-base;
45 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
46 | }
47 |
48 | // Bar of progress
49 | .progress-bar {
50 | float: left;
51 | width: 0%;
52 | height: 100%;
53 | font-size: @font-size-small;
54 | line-height: @line-height-computed;
55 | color: @progress-bar-color;
56 | text-align: center;
57 | background-color: @progress-bar-bg;
58 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
59 | .transition(width .6s ease);
60 | }
61 |
62 | // Striped bars
63 | .progress-striped .progress-bar {
64 | #gradient > .striped();
65 | background-size: 40px 40px;
66 | }
67 |
68 | // Call animation for the active one
69 | .progress.active .progress-bar {
70 | .animation(progress-bar-stripes 2s linear infinite);
71 | }
72 |
73 |
74 |
75 | // Variations
76 | // -------------------------
77 |
78 | .progress-bar-success {
79 | .progress-bar-variant(@progress-bar-success-bg);
80 | }
81 |
82 | .progress-bar-info {
83 | .progress-bar-variant(@progress-bar-info-bg);
84 | }
85 |
86 | .progress-bar-warning {
87 | .progress-bar-variant(@progress-bar-warning-bg);
88 | }
89 |
90 | .progress-bar-danger {
91 | .progress-bar-variant(@progress-bar-danger-bg);
92 | }
93 |
--------------------------------------------------------------------------------
/public/demo/less/scaffolding.less:
--------------------------------------------------------------------------------
1 | //
2 | // Scaffolding
3 | // --------------------------------------------------
4 |
5 |
6 | // Reset the box-sizing
7 |
8 | *,
9 | *:before,
10 | *:after {
11 | .box-sizing(border-box);
12 | }
13 |
14 |
15 | // Body reset
16 |
17 | html {
18 | font-size: 62.5%;
19 | -webkit-tap-highlight-color: rgba(0,0,0,0);
20 | }
21 |
22 | body {
23 | font-family: @font-family-base;
24 | font-size: @font-size-base;
25 | line-height: @line-height-base;
26 | color: @text-color;
27 | background-color: @body-bg;
28 | }
29 |
30 | // Reset fonts for relevant elements
31 | input,
32 | button,
33 | select,
34 | textarea {
35 | font-family: inherit;
36 | font-size: inherit;
37 | line-height: inherit;
38 | }
39 |
40 |
41 | // Links
42 |
43 | a {
44 | color: @link-color;
45 | text-decoration: none;
46 |
47 | &:hover,
48 | &:focus {
49 | color: @link-hover-color;
50 | text-decoration: underline;
51 | }
52 |
53 | &:focus {
54 | .tab-focus();
55 | }
56 | }
57 |
58 |
59 | // Images
60 |
61 | img {
62 | vertical-align: middle;
63 | }
64 |
65 | // Responsive images (ensure images don't scale beyond their parents)
66 | .img-responsive {
67 | .img-responsive();
68 | }
69 |
70 | // Rounded corners
71 | .img-rounded {
72 | border-radius: @border-radius-large;
73 | }
74 |
75 | // Image thumbnails
76 | //
77 | // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
78 | .img-thumbnail {
79 | padding: @thumbnail-padding;
80 | line-height: @line-height-base;
81 | background-color: @thumbnail-bg;
82 | border-radius: @thumbnail-border-radius;
83 | .transition(all .2s ease-in-out);
84 |
85 | // Keep them at most 100% wide
86 | .img-responsive(inline-block);
87 | }
88 |
89 | // Perfect circle
90 | .img-circle {
91 | border-radius: 50%; // set radius in percents
92 | }
93 |
94 |
95 | // Horizontal rules
96 |
97 | hr {
98 | margin-top: @line-height-computed;
99 | margin-bottom: @line-height-computed;
100 | border: 0;
101 | border-top: 1px solid @hr-border;
102 | }
103 |
104 |
105 | // Only display content to screen readers
106 | //
107 | // See: http://a11yproject.com/posts/how-to-hide-content/
108 |
109 | .sr-only {
110 | position: absolute;
111 | width: 1px;
112 | height: 1px;
113 | margin: -1px;
114 | padding: 0;
115 | overflow: hidden;
116 | clip: rect(0,0,0,0);
117 | border: 0;
118 | }
119 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_10.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
38 |
39 |
--------------------------------------------------------------------------------
/public/demo/less/grid.less:
--------------------------------------------------------------------------------
1 | //
2 | // Grid system
3 | // --------------------------------------------------
4 |
5 | // Set the container width, and override it for fixed navbars in media queries
6 | .container {
7 | .container-fixed();
8 | }
9 |
10 | // mobile first defaults
11 | .row {
12 | .make-row();
13 | }
14 |
15 | // Common styles for small and large grid columns
16 | .make-grid-columns();
17 |
18 |
19 | // Extra small grid
20 | //
21 | // Grid classes for extra small devices like smartphones. No offset, push, or
22 | // pull classes are present here due to the size of the target.
23 | //
24 | // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
25 | // it's full-width.
26 |
27 | .make-grid-columns-float(xs);
28 | .make-grid(@grid-columns, xs, width);
29 | .make-grid(@grid-columns, xs, pull);
30 | .make-grid(@grid-columns, xs, push);
31 | .make-grid(@grid-columns, xs, offset);
32 |
33 |
34 | // Small grid
35 | //
36 | // Columns, offsets, pushes, and pulls for the small device range, from phones
37 | // to tablets.
38 | //
39 | // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
40 | // it's full-width.
41 |
42 | @media (min-width: @screen-sm-min) {
43 | .container {
44 | width: @container-sm;
45 | }
46 |
47 | .make-grid-columns-float(sm);
48 | .make-grid(@grid-columns, sm, width);
49 | .make-grid(@grid-columns, sm, pull);
50 | .make-grid(@grid-columns, sm, push);
51 | .make-grid(@grid-columns, sm, offset);
52 | }
53 |
54 |
55 | // Medium grid
56 | //
57 | // Columns, offsets, pushes, and pulls for the desktop device range.
58 | //
59 | // Note that `.col-md-12` doesn't get floated on purpose--there's no need since
60 | // it's full-width.
61 |
62 | @media (min-width: @screen-md-min) {
63 | .container {
64 | width: @container-md;
65 | }
66 |
67 | .make-grid-columns-float(md);
68 | .make-grid(@grid-columns, md, width);
69 | .make-grid(@grid-columns, md, pull);
70 | .make-grid(@grid-columns, md, push);
71 | .make-grid(@grid-columns, md, offset);
72 | }
73 |
74 |
75 | // Large grid
76 | //
77 | // Columns, offsets, pushes, and pulls for the large desktop device range.
78 | //
79 | // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
80 | // it's full-width.
81 |
82 | @media (min-width: @screen-lg-min) {
83 | .container {
84 | width: @container-lg;
85 | }
86 |
87 | .make-grid-columns-float(lg);
88 | .make-grid(@grid-columns, lg, width);
89 | .make-grid(@grid-columns, lg, pull);
90 | .make-grid(@grid-columns, lg, push);
91 | .make-grid(@grid-columns, lg, offset);
92 | }
93 |
94 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_20.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
46 |
47 |
--------------------------------------------------------------------------------
/public/demo/less/tooltip.less:
--------------------------------------------------------------------------------
1 | //
2 | // Tooltips
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .tooltip {
8 | position: absolute;
9 | z-index: @zindex-tooltip;
10 | display: block;
11 | visibility: visible;
12 | font-size: @font-size-small;
13 | line-height: 1.4;
14 | .opacity(0);
15 |
16 | &.in { .opacity(.9); }
17 | &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
18 | &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
19 | &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
20 | &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
21 | }
22 |
23 | // Wrapper for the tooltip content
24 | .tooltip-inner {
25 | max-width: @tooltip-max-width;
26 | padding: 3px 8px;
27 | color: @tooltip-color;
28 | text-align: center;
29 | text-decoration: none;
30 | background-color: @tooltip-bg;
31 | border-radius: @border-radius-base;
32 | }
33 |
34 | // Arrows
35 | .tooltip-arrow {
36 | position: absolute;
37 | width: 0;
38 | height: 0;
39 | border-color: transparent;
40 | border-style: solid;
41 | }
42 | .tooltip {
43 | &.top .tooltip-arrow {
44 | bottom: 0;
45 | left: 50%;
46 | margin-left: -@tooltip-arrow-width;
47 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
48 | border-top-color: @tooltip-arrow-color;
49 | }
50 | &.top-left .tooltip-arrow {
51 | bottom: 0;
52 | left: @tooltip-arrow-width;
53 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
54 | border-top-color: @tooltip-arrow-color;
55 | }
56 | &.top-right .tooltip-arrow {
57 | bottom: 0;
58 | right: @tooltip-arrow-width;
59 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
60 | border-top-color: @tooltip-arrow-color;
61 | }
62 | &.right .tooltip-arrow {
63 | top: 50%;
64 | left: 0;
65 | margin-top: -@tooltip-arrow-width;
66 | border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
67 | border-right-color: @tooltip-arrow-color;
68 | }
69 | &.left .tooltip-arrow {
70 | top: 50%;
71 | right: 0;
72 | margin-top: -@tooltip-arrow-width;
73 | border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
74 | border-left-color: @tooltip-arrow-color;
75 | }
76 | &.bottom .tooltip-arrow {
77 | top: 0;
78 | left: 50%;
79 | margin-left: -@tooltip-arrow-width;
80 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
81 | border-bottom-color: @tooltip-arrow-color;
82 | }
83 | &.bottom-left .tooltip-arrow {
84 | top: 0;
85 | left: @tooltip-arrow-width;
86 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
87 | border-bottom-color: @tooltip-arrow-color;
88 | }
89 | &.bottom-right .tooltip-arrow {
90 | top: 0;
91 | right: @tooltip-arrow-width;
92 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
93 | border-bottom-color: @tooltip-arrow-color;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_15.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
55 |
56 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | actionmailer (4.0.0)
5 | actionpack (= 4.0.0)
6 | mail (~> 2.5.3)
7 | actionpack (4.0.0)
8 | activesupport (= 4.0.0)
9 | builder (~> 3.1.0)
10 | erubis (~> 2.7.0)
11 | rack (~> 1.5.2)
12 | rack-test (~> 0.6.2)
13 | activemodel (4.0.0)
14 | activesupport (= 4.0.0)
15 | builder (~> 3.1.0)
16 | activerecord (4.0.0)
17 | activemodel (= 4.0.0)
18 | activerecord-deprecated_finders (~> 1.0.2)
19 | activesupport (= 4.0.0)
20 | arel (~> 4.0.0)
21 | activerecord-deprecated_finders (1.0.3)
22 | activesupport (4.0.0)
23 | i18n (~> 0.6, >= 0.6.4)
24 | minitest (~> 4.2)
25 | multi_json (~> 1.3)
26 | thread_safe (~> 0.1)
27 | tzinfo (~> 0.3.37)
28 | arel (4.0.0)
29 | atomic (1.1.14)
30 | builder (3.1.4)
31 | coffee-rails (4.0.0)
32 | coffee-script (>= 2.2.0)
33 | railties (>= 4.0.0.beta, < 5.0)
34 | coffee-script (2.2.0)
35 | coffee-script-source
36 | execjs
37 | coffee-script-source (1.6.3)
38 | erubis (2.7.0)
39 | execjs (2.0.2)
40 | hike (1.2.3)
41 | i18n (0.6.5)
42 | jquery-rails (3.0.4)
43 | railties (>= 3.0, < 5.0)
44 | thor (>= 0.14, < 2.0)
45 | kramdown (1.2.0)
46 | mail (2.5.4)
47 | mime-types (~> 1.16)
48 | treetop (~> 1.4.8)
49 | mime-types (1.25)
50 | minitest (4.7.5)
51 | multi_json (1.8.1)
52 | polyglot (0.3.3)
53 | rack (1.5.2)
54 | rack-test (0.6.2)
55 | rack (>= 1.0)
56 | rails (4.0.0)
57 | actionmailer (= 4.0.0)
58 | actionpack (= 4.0.0)
59 | activerecord (= 4.0.0)
60 | activesupport (= 4.0.0)
61 | bundler (>= 1.3.0, < 2.0)
62 | railties (= 4.0.0)
63 | sprockets-rails (~> 2.0.0)
64 | railties (4.0.0)
65 | actionpack (= 4.0.0)
66 | activesupport (= 4.0.0)
67 | rake (>= 0.8.7)
68 | thor (>= 0.18.1, < 2.0)
69 | rake (10.1.0)
70 | sass (3.2.12)
71 | sass-rails (4.0.0)
72 | railties (>= 4.0.0.beta, < 5.0)
73 | sass (>= 3.1.10)
74 | sprockets-rails (~> 2.0.0)
75 | sprockets (2.10.0)
76 | hike (~> 1.2)
77 | multi_json (~> 1.0)
78 | rack (~> 1.0)
79 | tilt (~> 1.1, != 1.3.0)
80 | sprockets-rails (2.0.0)
81 | actionpack (>= 3.0)
82 | activesupport (>= 3.0)
83 | sprockets (~> 2.8)
84 | sqlite3 (1.3.8)
85 | thor (0.18.1)
86 | thread_safe (0.1.3)
87 | atomic
88 | tilt (1.4.1)
89 | treetop (1.4.15)
90 | polyglot
91 | polyglot (>= 0.3.1)
92 | tzinfo (0.3.37)
93 | uglifier (2.2.1)
94 | execjs (>= 0.3.0)
95 | multi_json (~> 1.0, >= 1.0.2)
96 |
97 | PLATFORMS
98 | ruby
99 |
100 | DEPENDENCIES
101 | coffee-rails (~> 4.0.0)
102 | jquery-rails
103 | kramdown
104 | rails (= 4.0.0)
105 | sass-rails (~> 4.0.0)
106 | sqlite3
107 | uglifier (>= 1.3.0)
108 |
--------------------------------------------------------------------------------
/app/assets/stylesheets/application.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This is a manifest file that'll be compiled into application.css, which will include all the files
3 | * listed below.
4 | *
5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6 | * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
7 | *
8 | * You're free to add application-wide styles to this file and they'll appear at the top of the
9 | * compiled file, but it's generally better to create a new file per style scope.
10 | *
11 | *= require bootstrap
12 | *= require_self
13 | *= require_tree .
14 | */
15 |
16 | .tagline {
17 | margin-bottom: 20px;
18 | }
19 |
20 | .label a {
21 | color: #fff;
22 | text-decoration: none;
23 | }
24 |
25 | .product-detail.row {
26 | margin: 1em 0;
27 | border-bottom: 1px solid #eee;
28 | }
29 | .product-detail img {
30 | max-height: 150px;
31 | max-width: 150px;
32 | }
33 | .product-detail h2 {
34 | margin-top: 0;
35 | margin-bottom: 0px;
36 | }
37 | .product-description {
38 | margin-top: 10px;
39 | }
40 |
41 | .list-rating {
42 | margin: 0;
43 | padding: 0;
44 | }
45 | .list-rating li {
46 | display: inline;
47 | list-style-type: none;
48 | }
49 |
50 |
51 |
52 | .navbar-default .navbar-nav > li {
53 | cursor: pointer;
54 | background-color: #824d3d;
55 | padding: 12px 12px;
56 | margin-top: -7px;
57 | color: #f0eee1;
58 | font-weight: bold;
59 | }
60 | .navbar-default .navbar-nav > li a {
61 | padding: 0;
62 | color: #f0eee1;
63 | }
64 | .navbar-default .navbar-nav > li:hover {
65 | background-color: #e87714;
66 | }
67 | .navbar-default .navbar-nav > li.active {
68 | color: #fff;
69 | background-color: #b65a31;
70 | }
71 |
72 | textarea {
73 | width: 100%;
74 | margin-bottom: 10px;
75 | }
76 |
77 | h2 {
78 | margin-top: 5px;
79 | }
80 |
81 | .reviews {
82 | padding: 0;
83 | }
84 | .reviews li {
85 | padding: 4px;
86 | border-bottom: 1px solid rgba(130, 98, 88, 0.40);
87 | }
88 | .reviews li:last-of-type {
89 | border: none;
90 | }
91 | .reviews li.read-more {
92 | position: relative;
93 | cursor: pointer;
94 | padding-bottom: 30px;
95 | }
96 | .reviews li .content {
97 | margin-top: 10px;
98 | }
99 | .reviews li.read-more .content {
100 | height: 40px;
101 | overflow: hidden;
102 | }
103 | .reviews li.read-more .expand {
104 | width:100%;
105 | position: absolute;
106 | bottom: 0px;
107 | height: 25px;
108 | text-align: center;
109 | }
110 | .reviews li.read-more:not(.is-expanded) .expand {
111 | height: 75px;
112 | padding-top: 50px;
113 | background: -webkit-linear-gradient(rgba(240, 238, 225, 0),rgba(240, 238, 225, 1));
114 | background-image: -moz-linear-gradient(rgba(240, 238, 225, 0),rgba(240, 238, 225, 1));
115 | background-image: -o-linear-gradient(rgba(240, 238, 225, 0),rgba(240, 238, 225, 1));
116 | background-image: linear-gradient(rgba(240, 238, 225, 0),rgba(240, 238, 225, 1));
117 | background-image: -ms-linear-gradient(rgba(240, 238, 225, 0),rgba(240, 238, 225, 1));
118 | }
119 |
120 | .reviews li.read-more.is-expanded .content {
121 | height: auto;
122 | }
123 |
124 | .reviews li.read-more span.label {
125 | display: absolute;
126 | }
--------------------------------------------------------------------------------
/app/views/example/_example_3_30.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
55 |
56 |
57 |
62 |
63 |
--------------------------------------------------------------------------------
/config/environments/production.rb:
--------------------------------------------------------------------------------
1 | EmberDemo::Application.configure do
2 | # Settings specified here will take precedence over those in config/application.rb.
3 |
4 | # Code is not reloaded between requests.
5 | config.cache_classes = true
6 |
7 | # Eager load code on boot. This eager loads most of Rails and
8 | # your application in memory, allowing both thread web servers
9 | # and those relying on copy on write to perform better.
10 | # Rake tasks automatically ignore this option for performance.
11 | config.eager_load = true
12 |
13 | # Full error reports are disabled and caching is turned on.
14 | config.consider_all_requests_local = false
15 | config.action_controller.perform_caching = true
16 |
17 | # Enable Rack::Cache to put a simple HTTP cache in front of your application
18 | # Add `rack-cache` to your Gemfile before enabling this.
19 | # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
20 | # config.action_dispatch.rack_cache = true
21 |
22 | # Disable Rails's static asset server (Apache or nginx will already do this).
23 | config.serve_static_assets = false
24 |
25 | # Compress JavaScripts and CSS.
26 | config.assets.js_compressor = :uglifier
27 | # config.assets.css_compressor = :sass
28 |
29 | # Do not fallback to assets pipeline if a precompiled asset is missed.
30 | config.assets.compile = false
31 |
32 | # Generate digests for assets URLs.
33 | config.assets.digest = true
34 |
35 | # Version of your assets, change this if you want to expire all your assets.
36 | config.assets.version = '1.0'
37 |
38 | # Specifies the header that your server uses for sending files.
39 | # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
40 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
41 |
42 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
43 | # config.force_ssl = true
44 |
45 | # Set to :debug to see everything in the log.
46 | config.log_level = :info
47 |
48 | # Prepend all log lines with the following tags.
49 | # config.log_tags = [ :subdomain, :uuid ]
50 |
51 | # Use a different logger for distributed setups.
52 | # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
53 |
54 | # Use a different cache store in production.
55 | # config.cache_store = :mem_cache_store
56 |
57 | # Enable serving of images, stylesheets, and JavaScripts from an asset server.
58 | # config.action_controller.asset_host = "http://assets.example.com"
59 |
60 | # Precompile additional assets.
61 | # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
62 | # config.assets.precompile += %w( search.js )
63 |
64 | # Ignore bad email addresses and do not raise email delivery errors.
65 | # Set this to true and configure the email server for immediate delivery to raise delivery errors.
66 | # config.action_mailer.raise_delivery_errors = false
67 |
68 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
69 | # the I18n.default_locale when a translation can not be found).
70 | config.i18n.fallbacks = true
71 |
72 | # Send deprecation notices to registered listeners.
73 | config.active_support.deprecation = :notify
74 |
75 | # Disable automatic flushing of the log to improve performance.
76 | # config.autoflush_log = false
77 |
78 | # Use default logging formatter so that PID and timestamp are not suppressed.
79 | config.log_formatter = ::Logger::Formatter.new
80 | end
81 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_50.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
56 |
57 |
69 |
70 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_40.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
55 |
56 |
68 |
69 |
--------------------------------------------------------------------------------
/public/demo/less/modals.less:
--------------------------------------------------------------------------------
1 | //
2 | // Modals
3 | // --------------------------------------------------
4 |
5 | // .modal-open - body class for killing the scroll
6 | // .modal - container to scroll within
7 | // .modal-dialog - positioning shell for the actual modal
8 | // .modal-content - actual modal w/ bg and corners and shit
9 |
10 | // Kill the scroll on the body
11 | .modal-open {
12 | overflow: hidden;
13 | }
14 |
15 | // Container that the modal scrolls within
16 | .modal {
17 | display: none;
18 | overflow: auto;
19 | overflow-y: scroll;
20 | position: fixed;
21 | top: 0;
22 | right: 0;
23 | bottom: 0;
24 | left: 0;
25 | z-index: @zindex-modal-background;
26 |
27 | // When fading in the modal, animate it to slide down
28 | &.fade .modal-dialog {
29 | .translate(0, -25%);
30 | .transition-transform(~"0.3s ease-out");
31 | }
32 | &.in .modal-dialog { .translate(0, 0)}
33 | }
34 |
35 | // Shell div to position the modal with bottom padding
36 | .modal-dialog {
37 | position: relative;
38 | margin-left: auto;
39 | margin-right: auto;
40 | width: auto;
41 | padding: 10px;
42 | z-index: (@zindex-modal-background + 10);
43 | }
44 |
45 | // Actual modal
46 | .modal-content {
47 | position: relative;
48 | background-color: @modal-content-bg;
49 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
50 | border: 1px solid @modal-content-border-color;
51 | border-radius: @border-radius-large;
52 | .box-shadow(0 3px 9px rgba(0,0,0,.5));
53 | background-clip: padding-box;
54 | // Remove focus outline from opened modal
55 | outline: none;
56 | }
57 |
58 | // Modal background
59 | .modal-backdrop {
60 | position: fixed;
61 | top: 0;
62 | right: 0;
63 | bottom: 0;
64 | left: 0;
65 | z-index: (@zindex-modal-background - 10);
66 | background-color: @modal-backdrop-bg;
67 | // Fade for backdrop
68 | &.fade { .opacity(0); }
69 | &.in { .opacity(.5); }
70 | }
71 |
72 | // Modal header
73 | // Top section of the modal w/ title and dismiss
74 | .modal-header {
75 | padding: @modal-title-padding;
76 | border-bottom: 1px solid @modal-header-border-color;
77 | min-height: (@modal-title-padding + @modal-title-line-height);
78 | }
79 | // Close icon
80 | .modal-header .close {
81 | margin-top: -2px;
82 | }
83 |
84 | // Title text within header
85 | .modal-title {
86 | margin: 0;
87 | line-height: @modal-title-line-height;
88 | }
89 |
90 | // Modal body
91 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
92 | .modal-body {
93 | position: relative;
94 | padding: @modal-inner-padding;
95 | }
96 |
97 | // Footer (for actions)
98 | .modal-footer {
99 | margin-top: 15px;
100 | padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
101 | text-align: right; // right align buttons
102 | border-top: 1px solid @modal-footer-border-color;
103 | .clearfix(); // clear it in case folks use .pull-* classes on buttons
104 |
105 | // Properly space out buttons
106 | .btn + .btn {
107 | margin-left: 5px;
108 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
109 | }
110 | // but override that for button groups
111 | .btn-group .btn + .btn {
112 | margin-left: -1px;
113 | }
114 | // and override it for block buttons as well
115 | .btn-block + .btn-block {
116 | margin-left: 0;
117 | }
118 | }
119 |
120 | // Scale up the modal
121 | @media screen and (min-width: @screen-sm-min) {
122 |
123 | .modal-dialog {
124 | width: 600px;
125 | padding-top: 30px;
126 | padding-bottom: 30px;
127 | }
128 | .modal-content {
129 | .box-shadow(0 5px 15px rgba(0,0,0,.5));
130 | }
131 |
132 | }
133 |
--------------------------------------------------------------------------------
/app/views/example/_example_3_60.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
56 |
57 |
69 |
70 |
73 |
74 |
--------------------------------------------------------------------------------
/public/demo/less/popovers.less:
--------------------------------------------------------------------------------
1 | //
2 | // Popovers
3 | // --------------------------------------------------
4 |
5 |
6 | .popover {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | z-index: @zindex-popover;
11 | display: none;
12 | max-width: @popover-max-width;
13 | padding: 1px;
14 | text-align: left; // Reset given new insertion method
15 | background-color: @popover-bg;
16 | background-clip: padding-box;
17 | border: 1px solid @popover-fallback-border-color;
18 | border: 1px solid @popover-border-color;
19 | border-radius: @border-radius-large;
20 | .box-shadow(0 5px 10px rgba(0,0,0,.2));
21 |
22 | // Overrides for proper insertion
23 | white-space: normal;
24 |
25 | // Offset the popover to account for the popover arrow
26 | &.top { margin-top: -10px; }
27 | &.right { margin-left: 10px; }
28 | &.bottom { margin-top: 10px; }
29 | &.left { margin-left: -10px; }
30 | }
31 |
32 | .popover-title {
33 | margin: 0; // reset heading margin
34 | padding: 8px 14px;
35 | font-size: @font-size-base;
36 | font-weight: normal;
37 | line-height: 18px;
38 | background-color: @popover-title-bg;
39 | border-bottom: 1px solid darken(@popover-title-bg, 5%);
40 | border-radius: 5px 5px 0 0;
41 | }
42 |
43 | .popover-content {
44 | padding: 9px 14px;
45 | }
46 |
47 | // Arrows
48 | //
49 | // .arrow is outer, .arrow:after is inner
50 |
51 | .popover .arrow {
52 | &,
53 | &:after {
54 | position: absolute;
55 | display: block;
56 | width: 0;
57 | height: 0;
58 | border-color: transparent;
59 | border-style: solid;
60 | }
61 | }
62 | .popover .arrow {
63 | border-width: @popover-arrow-outer-width;
64 | }
65 | .popover .arrow:after {
66 | border-width: @popover-arrow-width;
67 | content: "";
68 | }
69 |
70 | .popover {
71 | &.top .arrow {
72 | left: 50%;
73 | margin-left: -@popover-arrow-outer-width;
74 | border-bottom-width: 0;
75 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
76 | border-top-color: @popover-arrow-outer-color;
77 | bottom: -@popover-arrow-outer-width;
78 | &:after {
79 | content: " ";
80 | bottom: 1px;
81 | margin-left: -@popover-arrow-width;
82 | border-bottom-width: 0;
83 | border-top-color: @popover-arrow-color;
84 | }
85 | }
86 | &.right .arrow {
87 | top: 50%;
88 | left: -@popover-arrow-outer-width;
89 | margin-top: -@popover-arrow-outer-width;
90 | border-left-width: 0;
91 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
92 | border-right-color: @popover-arrow-outer-color;
93 | &:after {
94 | content: " ";
95 | left: 1px;
96 | bottom: -@popover-arrow-width;
97 | border-left-width: 0;
98 | border-right-color: @popover-arrow-color;
99 | }
100 | }
101 | &.bottom .arrow {
102 | left: 50%;
103 | margin-left: -@popover-arrow-outer-width;
104 | border-top-width: 0;
105 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
106 | border-bottom-color: @popover-arrow-outer-color;
107 | top: -@popover-arrow-outer-width;
108 | &:after {
109 | content: " ";
110 | top: 1px;
111 | margin-left: -@popover-arrow-width;
112 | border-top-width: 0;
113 | border-bottom-color: @popover-arrow-color;
114 | }
115 | }
116 |
117 | &.left .arrow {
118 | top: 50%;
119 | right: -@popover-arrow-outer-width;
120 | margin-top: -@popover-arrow-outer-width;
121 | border-right-width: 0;
122 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
123 | border-left-color: @popover-arrow-outer-color;
124 | &:after {
125 | content: " ";
126 | right: 1px;
127 | border-right-width: 0;
128 | border-left-color: @popover-arrow-color;
129 | bottom: -@popover-arrow-width;
130 | }
131 | }
132 |
133 | }
134 |
--------------------------------------------------------------------------------
/public/demo/less/input-groups.less:
--------------------------------------------------------------------------------
1 | //
2 | // Input groups
3 | // --------------------------------------------------
4 |
5 | // Base styles
6 | // -------------------------
7 | .input-group {
8 | position: relative; // For dropdowns
9 | display: table;
10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11 |
12 | // Undo padding and float of grid classes
13 | &.col {
14 | float: none;
15 | padding-left: 0;
16 | padding-right: 0;
17 | }
18 |
19 | .form-control {
20 | width: 100%;
21 | margin-bottom: 0;
22 | }
23 | }
24 |
25 | // Sizing options
26 | //
27 | // Remix the default form control sizing classes into new ones for easier
28 | // manipulation.
29 |
30 | .input-group-lg > .form-control,
31 | .input-group-lg > .input-group-addon,
32 | .input-group-lg > .input-group-btn > .btn { .input-lg(); }
33 | .input-group-sm > .form-control,
34 | .input-group-sm > .input-group-addon,
35 | .input-group-sm > .input-group-btn > .btn { .input-sm(); }
36 |
37 |
38 | // Display as table-cell
39 | // -------------------------
40 | .input-group-addon,
41 | .input-group-btn,
42 | .input-group .form-control {
43 | display: table-cell;
44 |
45 | &:not(:first-child):not(:last-child) {
46 | border-radius: 0;
47 | }
48 | }
49 | // Addon and addon wrapper for buttons
50 | .input-group-addon,
51 | .input-group-btn {
52 | width: 1%;
53 | white-space: nowrap;
54 | vertical-align: middle; // Match the inputs
55 | }
56 |
57 | // Text input groups
58 | // -------------------------
59 | .input-group-addon {
60 | padding: @padding-base-vertical @padding-base-horizontal;
61 | font-size: @font-size-base;
62 | font-weight: normal;
63 | line-height: 1;
64 | color: @input-color;
65 | text-align: center;
66 | background-color: @input-group-addon-bg;
67 | border: 1px solid @input-group-addon-border-color;
68 | border-radius: @border-radius-base;
69 |
70 | // Sizing
71 | &.input-sm {
72 | padding: @padding-small-vertical @padding-small-horizontal;
73 | font-size: @font-size-small;
74 | border-radius: @border-radius-small;
75 | }
76 | &.input-lg {
77 | padding: @padding-large-vertical @padding-large-horizontal;
78 | font-size: @font-size-large;
79 | border-radius: @border-radius-large;
80 | }
81 |
82 | // Nuke default margins from checkboxes and radios to vertically center within.
83 | input[type="radio"],
84 | input[type="checkbox"] {
85 | margin-top: 0;
86 | }
87 | }
88 |
89 | // Reset rounded corners
90 | .input-group .form-control:first-child,
91 | .input-group-addon:first-child,
92 | .input-group-btn:first-child > .btn,
93 | .input-group-btn:first-child > .dropdown-toggle,
94 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
95 | .border-right-radius(0);
96 | }
97 | .input-group-addon:first-child {
98 | border-right: 0;
99 | }
100 | .input-group .form-control:last-child,
101 | .input-group-addon:last-child,
102 | .input-group-btn:last-child > .btn,
103 | .input-group-btn:last-child > .dropdown-toggle,
104 | .input-group-btn:first-child > .btn:not(:first-child) {
105 | .border-left-radius(0);
106 | }
107 | .input-group-addon:last-child {
108 | border-left: 0;
109 | }
110 |
111 | // Button input groups
112 | // -------------------------
113 | .input-group-btn {
114 | position: relative;
115 | white-space: nowrap;
116 |
117 | // Negative margin to only have a 1px border between the two
118 | &:first-child > .btn {
119 | margin-right: -1px;
120 | }
121 | &:last-child > .btn {
122 | margin-left: -1px;
123 | }
124 | }
125 | .input-group-btn > .btn {
126 | position: relative;
127 | // Jankily prevent input button groups from wrapping
128 | + .btn {
129 | margin-left: -4px;
130 | }
131 | // Bring the "active" button to the front
132 | &:hover,
133 | &:active {
134 | z-index: 2;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/app/views/example/_example_4_50.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/app/views/example/_example_5_5.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/app/views/example/_example_4_20.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
56 |
57 |
69 |
70 |
73 |
74 |
--------------------------------------------------------------------------------
/app/views/example/_example_4_10.html.erb:
--------------------------------------------------------------------------------
1 |
23 |
24 |
30 |
31 |
34 |
35 |
40 |
56 |
57 |
69 |
70 |
73 |
74 |
--------------------------------------------------------------------------------
/public/demo/less/buttons.less:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // --------------------------------------------------
8 |
9 | // Core styles
10 | .btn {
11 | display: inline-block;
12 | margin-bottom: 0; // For input.btn
13 | font-weight: @btn-font-weight;
14 | text-align: center;
15 | vertical-align: middle;
16 | cursor: pointer;
17 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
18 | border: 1px solid transparent;
19 | white-space: nowrap;
20 | .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
21 | .user-select(none);
22 |
23 | &:focus {
24 | .tab-focus();
25 | }
26 |
27 | &:hover,
28 | &:focus {
29 | color: @btn-default-color;
30 | text-decoration: none;
31 | }
32 |
33 | &:active,
34 | &.active {
35 | outline: 0;
36 | background-image: none;
37 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
38 | }
39 |
40 | &.disabled,
41 | &[disabled],
42 | fieldset[disabled] & {
43 | cursor: not-allowed;
44 | pointer-events: none; // Future-proof disabling of clicks
45 | .opacity(.65);
46 | .box-shadow(none);
47 | }
48 |
49 | }
50 |
51 |
52 | // Alternate buttons
53 | // --------------------------------------------------
54 |
55 | .btn-default {
56 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
57 | }
58 | .btn-primary {
59 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
60 | }
61 | // Warning appears as orange
62 | .btn-warning {
63 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
64 | }
65 | // Danger and error appear as red
66 | .btn-danger {
67 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
68 | }
69 | // Success appears as green
70 | .btn-success {
71 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
72 | }
73 | // Info appears as blue-green
74 | .btn-info {
75 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
76 | }
77 |
78 |
79 | // Link buttons
80 | // -------------------------
81 |
82 | // Make a button look and behave like a link
83 | .btn-link {
84 | color: @link-color;
85 | font-weight: normal;
86 | cursor: pointer;
87 | border-radius: 0;
88 |
89 | &,
90 | &:active,
91 | &[disabled],
92 | fieldset[disabled] & {
93 | background-color: transparent;
94 | .box-shadow(none);
95 | }
96 | &,
97 | &:hover,
98 | &:focus,
99 | &:active {
100 | border-color: transparent;
101 | }
102 | &:hover,
103 | &:focus {
104 | color: @link-hover-color;
105 | text-decoration: underline;
106 | background-color: transparent;
107 | }
108 | &[disabled],
109 | fieldset[disabled] & {
110 | &:hover,
111 | &:focus {
112 | color: @btn-link-disabled-color;
113 | text-decoration: none;
114 | }
115 | }
116 | }
117 |
118 |
119 | // Button Sizes
120 | // --------------------------------------------------
121 |
122 | .btn-lg {
123 | // line-height: ensure even-numbered height of button next to large input
124 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
125 | }
126 | .btn-sm,
127 | .btn-xs {
128 | // line-height: ensure proper height of button next to small input
129 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
130 | }
131 | .btn-xs {
132 | padding: 1px 5px;
133 | }
134 |
135 |
136 | // Block button
137 | // --------------------------------------------------
138 |
139 | .btn-block {
140 | display: block;
141 | width: 100%;
142 | padding-left: 0;
143 | padding-right: 0;
144 | }
145 |
146 | // Vertically space out multiple block buttons
147 | .btn-block + .btn-block {
148 | margin-top: 5px;
149 | }
150 |
151 | // Specificity overrides
152 | input[type="submit"],
153 | input[type="reset"],
154 | input[type="button"] {
155 | &.btn-block {
156 | width: 100%;
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/public/demo/less/panels.less:
--------------------------------------------------------------------------------
1 | //
2 | // Panels
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .panel {
8 | margin-bottom: @line-height-computed;
9 | background-color: @panel-bg;
10 | border: 1px solid transparent;
11 | border-radius: @panel-border-radius;
12 | .box-shadow(0 1px 1px rgba(0,0,0,.05));
13 | }
14 |
15 | // Panel contents
16 | .panel-body {
17 | padding: 15px;
18 | .clearfix();
19 | }
20 |
21 |
22 | // List groups in panels
23 | //
24 | // By default, space out list group content from panel headings to account for
25 | // any kind of custom content between the two.
26 |
27 | .panel {
28 | > .list-group {
29 | margin-bottom: 0;
30 |
31 | .list-group-item {
32 | border-width: 1px 0;
33 |
34 | // Remove border radius for top one
35 | &:first-child {
36 | .border-top-radius(0);
37 | }
38 | // But keep it for the last one
39 | &:last-child {
40 | border-bottom: 0;
41 | }
42 | }
43 | }
44 | }
45 | // Collapse space between when there's no additional content.
46 | .panel-heading + .list-group {
47 | .list-group-item:first-child {
48 | border-top-width: 0;
49 | }
50 | }
51 |
52 |
53 | // Tables in panels
54 | //
55 | // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
56 | // watch it go full width.
57 |
58 | .panel {
59 | > .table,
60 | > .table-responsive {
61 | margin-bottom: 0;
62 | }
63 | > .panel-body + .table,
64 | > .panel-body + .table-responsive {
65 | border-top: 1px solid @table-border-color;
66 | }
67 | > .table-bordered,
68 | > .table-responsive > .table-bordered {
69 | border: 0;
70 | > thead,
71 | > tbody,
72 | > tfoot {
73 | > tr {
74 | > th:first-child,
75 | > td:first-child {
76 | border-left: 0;
77 | }
78 | > th:last-child,
79 | > td:last-child {
80 | border-right: 0;
81 | }
82 |
83 | &:last-child > th,
84 | &:last-child > td {
85 | border-bottom: 0;
86 | }
87 | }
88 | }
89 | }
90 | }
91 |
92 |
93 | // Optional heading
94 | .panel-heading {
95 | padding: 10px 15px;
96 | border-bottom: 1px solid transparent;
97 | .border-top-radius(@panel-border-radius - 1);
98 |
99 | > .dropdown .dropdown-toggle {
100 | color: inherit;
101 | }
102 | }
103 |
104 | // Within heading, strip any `h*` tag of it's default margins for spacing.
105 | .panel-title {
106 | margin-top: 0;
107 | margin-bottom: 0;
108 | font-size: ceil((@font-size-base * 1.125));
109 | > a {
110 | color: inherit;
111 | }
112 | }
113 |
114 | // Optional footer (stays gray in every modifier class)
115 | .panel-footer {
116 | padding: 10px 15px;
117 | background-color: @panel-footer-bg;
118 | border-top: 1px solid @panel-inner-border;
119 | .border-bottom-radius(@panel-border-radius - 1);
120 | }
121 |
122 |
123 | // Collapsable panels (aka, accordion)
124 | //
125 | // Wrap a series of panels in `.panel-group` to turn them into an accordion with
126 | // the help of our collapse JavaScript plugin.
127 |
128 | .panel-group {
129 | // Tighten up margin so it's only between panels
130 | .panel {
131 | margin-bottom: 0;
132 | border-radius: @panel-border-radius;
133 | overflow: hidden; // crop contents when collapsed
134 | + .panel {
135 | margin-top: 5px;
136 | }
137 | }
138 |
139 | .panel-heading {
140 | border-bottom: 0;
141 | + .panel-collapse .panel-body {
142 | border-top: 1px solid @panel-inner-border;
143 | }
144 | }
145 | .panel-footer {
146 | border-top: 0;
147 | + .panel-collapse .panel-body {
148 | border-bottom: 1px solid @panel-inner-border;
149 | }
150 | }
151 | }
152 |
153 |
154 | // Contextual variations
155 | .panel-default {
156 | .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
157 | }
158 | .panel-primary {
159 | .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
160 | }
161 | .panel-success {
162 | .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
163 | }
164 | .panel-warning {
165 | .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
166 | }
167 | .panel-danger {
168 | .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
169 | }
170 | .panel-info {
171 | .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
172 | }
173 |
--------------------------------------------------------------------------------
/app/views/example/_example_4_40.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/app/views/example/_example_4_30.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/public/demo/less/dropdowns.less:
--------------------------------------------------------------------------------
1 | //
2 | // Dropdown menus
3 | // --------------------------------------------------
4 |
5 |
6 | // Dropdown arrow/caret
7 | .caret {
8 | display: inline-block;
9 | width: 0;
10 | height: 0;
11 | margin-left: 2px;
12 | vertical-align: middle;
13 | border-top: @caret-width-base solid @dropdown-caret-color;
14 | border-right: @caret-width-base solid transparent;
15 | border-left: @caret-width-base solid transparent;
16 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
17 | // we can just straight up remove this.
18 | border-bottom: 0 dotted;
19 | }
20 |
21 | // The dropdown wrapper (div)
22 | .dropdown {
23 | position: relative;
24 | }
25 |
26 | // Prevent the focus on the dropdown toggle when closing dropdowns
27 | .dropdown-toggle:focus {
28 | outline: 0;
29 | }
30 |
31 | // The dropdown menu (ul)
32 | .dropdown-menu {
33 | position: absolute;
34 | top: 100%;
35 | left: 0;
36 | z-index: @zindex-dropdown;
37 | display: none; // none by default, but block on "open" of the menu
38 | float: left;
39 | min-width: 160px;
40 | padding: 5px 0;
41 | margin: 2px 0 0; // override default ul
42 | list-style: none;
43 | font-size: @font-size-base;
44 | background-color: @dropdown-bg;
45 | border: 1px solid @dropdown-fallback-border; // IE8 fallback
46 | border: 1px solid @dropdown-border;
47 | border-radius: @border-radius-base;
48 | .box-shadow(0 6px 12px rgba(0,0,0,.175));
49 | background-clip: padding-box;
50 |
51 | // Aligns the dropdown menu to right
52 | &.pull-right {
53 | right: 0;
54 | left: auto;
55 | }
56 |
57 | // Dividers (basically an hr) within the dropdown
58 | .divider {
59 | .nav-divider(@dropdown-divider-bg);
60 | }
61 |
62 | // Links within the dropdown menu
63 | > li > a {
64 | display: block;
65 | padding: 3px 20px;
66 | clear: both;
67 | font-weight: normal;
68 | line-height: @line-height-base;
69 | color: @dropdown-link-color;
70 | white-space: nowrap; // prevent links from randomly breaking onto new lines
71 | }
72 | }
73 |
74 | // Hover/Focus state
75 | .dropdown-menu > li > a {
76 | &:hover,
77 | &:focus {
78 | text-decoration: none;
79 | color: @dropdown-link-hover-color;
80 | background-color: @dropdown-link-hover-bg;
81 | }
82 | }
83 |
84 | // Active state
85 | .dropdown-menu > .active > a {
86 | &,
87 | &:hover,
88 | &:focus {
89 | color: @dropdown-link-active-color;
90 | text-decoration: none;
91 | outline: 0;
92 | background-color: @dropdown-link-active-bg;
93 | }
94 | }
95 |
96 | // Disabled state
97 | //
98 | // Gray out text and ensure the hover/focus state remains gray
99 |
100 | .dropdown-menu > .disabled > a {
101 | &,
102 | &:hover,
103 | &:focus {
104 | color: @dropdown-link-disabled-color;
105 | }
106 | }
107 | // Nuke hover/focus effects
108 | .dropdown-menu > .disabled > a {
109 | &:hover,
110 | &:focus {
111 | text-decoration: none;
112 | background-color: transparent;
113 | background-image: none; // Remove CSS gradient
114 | .reset-filter();
115 | cursor: not-allowed;
116 | }
117 | }
118 |
119 | // Open state for the dropdown
120 | .open {
121 | // Show the menu
122 | > .dropdown-menu {
123 | display: block;
124 | }
125 |
126 | // Remove the outline when :focus is triggered
127 | > a {
128 | outline: 0;
129 | }
130 | }
131 |
132 | // Dropdown section headers
133 | .dropdown-header {
134 | display: block;
135 | padding: 3px 20px;
136 | font-size: @font-size-small;
137 | line-height: @line-height-base;
138 | color: @dropdown-header-color;
139 | }
140 |
141 | // Backdrop to catch body clicks on mobile, etc.
142 | .dropdown-backdrop {
143 | position: fixed;
144 | left: 0;
145 | right: 0;
146 | bottom: 0;
147 | top: 0;
148 | z-index: @zindex-dropdown - 10;
149 | }
150 |
151 | // Right aligned dropdowns
152 | .pull-right > .dropdown-menu {
153 | right: 0;
154 | left: auto;
155 | }
156 |
157 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
158 | //
159 | // Just add .dropup after the standard .dropdown class and you're set, bro.
160 | // TODO: abstract this so that the navbar fixed styles are not placed here?
161 |
162 | .dropup,
163 | .navbar-fixed-bottom .dropdown {
164 | // Reverse the caret
165 | .caret {
166 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
167 | // gets fixed, restore `border-top: 0;`.
168 | border-top: 0 dotted;
169 | border-bottom: @caret-width-base solid @dropdown-caret-color;
170 | content: "";
171 | }
172 | // Different positioning for bottom up menu
173 | .dropdown-menu {
174 | top: auto;
175 | bottom: 100%;
176 | margin-bottom: 1px;
177 | }
178 | }
179 |
180 |
181 | // Component alignment
182 | //
183 | // Reiterate per navbar.less and the modified component alignment there.
184 |
185 | @media (min-width: @grid-float-breakpoint) {
186 | .navbar-right {
187 | .dropdown-menu {
188 | .pull-right > .dropdown-menu();
189 | }
190 | }
191 | }
192 |
193 |
--------------------------------------------------------------------------------
/public/demo/less/tables.less:
--------------------------------------------------------------------------------
1 | //
2 | // Tables
3 | // --------------------------------------------------
4 |
5 |
6 | table {
7 | max-width: 100%;
8 | background-color: @table-bg;
9 | }
10 | th {
11 | text-align: left;
12 | }
13 |
14 |
15 | // Baseline styles
16 |
17 | .table {
18 | width: 100%;
19 | margin-bottom: @line-height-computed;
20 | // Cells
21 | > thead,
22 | > tbody,
23 | > tfoot {
24 | > tr {
25 | > th,
26 | > td {
27 | padding: @table-cell-padding;
28 | line-height: @line-height-base;
29 | vertical-align: top;
30 | border-top: 1px solid @table-border-color;
31 | }
32 | }
33 | }
34 | // Bottom align for column headings
35 | > thead > tr > th {
36 | vertical-align: bottom;
37 | border-bottom: 2px solid @table-border-color;
38 | }
39 | // Remove top border from thead by default
40 | > caption + thead,
41 | > colgroup + thead,
42 | > thead:first-child {
43 | > tr:first-child {
44 | > th,
45 | > td {
46 | border-top: 0;
47 | }
48 | }
49 | }
50 | // Account for multiple tbody instances
51 | > tbody + tbody {
52 | border-top: 2px solid @table-border-color;
53 | }
54 |
55 | // Nesting
56 | .table {
57 | background-color: @body-bg;
58 | }
59 | }
60 |
61 |
62 | // Condensed table w/ half padding
63 |
64 | .table-condensed {
65 | > thead,
66 | > tbody,
67 | > tfoot {
68 | > tr {
69 | > th,
70 | > td {
71 | padding: @table-condensed-cell-padding;
72 | }
73 | }
74 | }
75 | }
76 |
77 |
78 | // Bordered version
79 | //
80 | // Add borders all around the table and between all the columns.
81 |
82 | .table-bordered {
83 | border: 1px solid @table-border-color;
84 | > thead,
85 | > tbody,
86 | > tfoot {
87 | > tr {
88 | > th,
89 | > td {
90 | border: 1px solid @table-border-color;
91 | }
92 | }
93 | }
94 | > thead > tr {
95 | > th,
96 | > td {
97 | border-bottom-width: 2px;
98 | }
99 | }
100 | }
101 |
102 |
103 | // Zebra-striping
104 | //
105 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
106 |
107 | .table-striped > tbody > tr:nth-child(odd) {
108 | > td,
109 | > th {
110 | background-color: @table-bg-accent;
111 | }
112 | }
113 |
114 |
115 | // Hover effect
116 | //
117 | // Placed here since it has to come after the potential zebra striping
118 |
119 | .table-hover > tbody > tr:hover {
120 | > td,
121 | > th {
122 | background-color: @table-bg-hover;
123 | }
124 | }
125 |
126 |
127 | // Table cell sizing
128 | //
129 | // Reset default table behavior
130 |
131 | table col[class*="col-"] {
132 | float: none;
133 | display: table-column;
134 | }
135 | table {
136 | td,
137 | th {
138 | &[class*="col-"] {
139 | float: none;
140 | display: table-cell;
141 | }
142 | }
143 | }
144 |
145 |
146 | // Table backgrounds
147 | //
148 | // Exact selectors below required to override `.table-striped` and prevent
149 | // inheritance to nested tables.
150 |
151 | .table > thead > tr,
152 | .table > tbody > tr,
153 | .table > tfoot > tr {
154 | > td.active,
155 | > th.active,
156 | &.active > td,
157 | &.active > th {
158 | background-color: @table-bg-active;
159 | }
160 | }
161 |
162 | // Generate the contextual variants
163 | .table-row-variant(success; @state-success-bg; @state-success-border);
164 | .table-row-variant(danger; @state-danger-bg; @state-danger-border);
165 | .table-row-variant(warning; @state-warning-bg; @state-warning-border);
166 |
167 |
168 | // Responsive tables
169 | //
170 | // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
171 | // by enabling horizontal scrolling. Only applies <768px. Everything above that
172 | // will display normally.
173 |
174 | @media (max-width: @screen-xs-max) {
175 | .table-responsive {
176 | width: 100%;
177 | margin-bottom: (@line-height-computed * 0.75);
178 | overflow-y: hidden;
179 | overflow-x: scroll;
180 | -ms-overflow-style: -ms-autohiding-scrollbar;
181 | border: 1px solid @table-border-color;
182 | -webkit-overflow-scrolling: touch;
183 |
184 | // Tighten up spacing
185 | > .table {
186 | margin-bottom: 0;
187 |
188 | // Ensure the content doesn't wrap
189 | > thead,
190 | > tbody,
191 | > tfoot {
192 | > tr {
193 | > th,
194 | > td {
195 | white-space: nowrap;
196 | }
197 | }
198 | }
199 | }
200 |
201 | // Special overrides for the bordered tables
202 | > .table-bordered {
203 | border: 0;
204 |
205 | // Nuke the appropriate borders so that the parent can handle them
206 | > thead,
207 | > tbody,
208 | > tfoot {
209 | > tr {
210 | > th:first-child,
211 | > td:first-child {
212 | border-left: 0;
213 | }
214 | > th:last-child,
215 | > td:last-child {
216 | border-right: 0;
217 | }
218 | }
219 | }
220 |
221 | // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
222 | // chances are there will be only one `tr` in a `thead` and that would
223 | // remove the border altogether.
224 | > tbody,
225 | > tfoot {
226 | > tr:last-child {
227 | > th,
228 | > td {
229 | border-bottom: 0;
230 | }
231 | }
232 | }
233 |
234 | }
235 | }
236 | }
237 |
--------------------------------------------------------------------------------
/public/demo/less/carousel.less:
--------------------------------------------------------------------------------
1 | //
2 | // Carousel
3 | // --------------------------------------------------
4 |
5 |
6 | // Wrapper for the slide container and indicators
7 | .carousel {
8 | position: relative;
9 | }
10 |
11 | .carousel-inner {
12 | position: relative;
13 | overflow: hidden;
14 | width: 100%;
15 |
16 | > .item {
17 | display: none;
18 | position: relative;
19 | .transition(.6s ease-in-out left);
20 |
21 | // Account for jankitude on images
22 | > img,
23 | > a > img {
24 | .img-responsive();
25 | line-height: 1;
26 | }
27 | }
28 |
29 | > .active,
30 | > .next,
31 | > .prev { display: block; }
32 |
33 | > .active {
34 | left: 0;
35 | }
36 |
37 | > .next,
38 | > .prev {
39 | position: absolute;
40 | top: 0;
41 | width: 100%;
42 | }
43 |
44 | > .next {
45 | left: 100%;
46 | }
47 | > .prev {
48 | left: -100%;
49 | }
50 | > .next.left,
51 | > .prev.right {
52 | left: 0;
53 | }
54 |
55 | > .active.left {
56 | left: -100%;
57 | }
58 | > .active.right {
59 | left: 100%;
60 | }
61 |
62 | }
63 |
64 | // Left/right controls for nav
65 | // ---------------------------
66 |
67 | .carousel-control {
68 | position: absolute;
69 | top: 0;
70 | left: 0;
71 | bottom: 0;
72 | width: @carousel-control-width;
73 | .opacity(@carousel-control-opacity);
74 | font-size: @carousel-control-font-size;
75 | color: @carousel-control-color;
76 | text-align: center;
77 | text-shadow: @carousel-text-shadow;
78 | // We can't have this transition here because WebKit cancels the carousel
79 | // animation if you trip this while in the middle of another animation.
80 |
81 | // Set gradients for backgrounds
82 | &.left {
83 | #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
84 | }
85 | &.right {
86 | left: auto;
87 | right: 0;
88 | #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
89 | }
90 |
91 | // Hover/focus state
92 | &:hover,
93 | &:focus {
94 | color: @carousel-control-color;
95 | text-decoration: none;
96 | .opacity(.9);
97 | }
98 |
99 | // Toggles
100 | .icon-prev,
101 | .icon-next,
102 | .glyphicon-chevron-left,
103 | .glyphicon-chevron-right {
104 | position: absolute;
105 | top: 50%;
106 | z-index: 5;
107 | display: inline-block;
108 | }
109 | .icon-prev,
110 | .glyphicon-chevron-left {
111 | left: 50%;
112 | }
113 | .icon-next,
114 | .glyphicon-chevron-right {
115 | right: 50%;
116 | }
117 | .icon-prev,
118 | .icon-next {
119 | width: 20px;
120 | height: 20px;
121 | margin-top: -10px;
122 | margin-left: -10px;
123 | font-family: serif;
124 | }
125 |
126 | .icon-prev {
127 | &:before {
128 | content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
129 | }
130 | }
131 | .icon-next {
132 | &:before {
133 | content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
134 | }
135 | }
136 | }
137 |
138 | // Optional indicator pips
139 | //
140 | // Add an unordered list with the following class and add a list item for each
141 | // slide your carousel holds.
142 |
143 | .carousel-indicators {
144 | position: absolute;
145 | bottom: 10px;
146 | left: 50%;
147 | z-index: 15;
148 | width: 60%;
149 | margin-left: -30%;
150 | padding-left: 0;
151 | list-style: none;
152 | text-align: center;
153 |
154 | li {
155 | display: inline-block;
156 | width: 10px;
157 | height: 10px;
158 | margin: 1px;
159 | text-indent: -999px;
160 | border: 1px solid @carousel-indicator-border-color;
161 | border-radius: 10px;
162 | cursor: pointer;
163 |
164 | // IE8-9 hack for event handling
165 | //
166 | // Internet Explorer 8-9 does not support clicks on elements without a set
167 | // `background-color`. We cannot use `filter` since that's not viewed as a
168 | // background color by the browser. Thus, a hack is needed.
169 | //
170 | // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
171 | // set alpha transparency for the best results possible.
172 | background-color: #000 \9; // IE8
173 | background-color: rgba(0,0,0,0); // IE9
174 | }
175 | .active {
176 | margin: 0;
177 | width: 12px;
178 | height: 12px;
179 | background-color: @carousel-indicator-active-bg;
180 | }
181 | }
182 |
183 | // Optional captions
184 | // -----------------------------
185 | // Hidden by default for smaller viewports
186 | .carousel-caption {
187 | position: absolute;
188 | left: 15%;
189 | right: 15%;
190 | bottom: 20px;
191 | z-index: 10;
192 | padding-top: 20px;
193 | padding-bottom: 20px;
194 | color: @carousel-caption-color;
195 | text-align: center;
196 | text-shadow: @carousel-text-shadow;
197 | & .btn {
198 | text-shadow: none; // No shadow for button elements in carousel-caption
199 | }
200 | }
201 |
202 |
203 | // Scale up controls for tablets and up
204 | @media screen and (min-width: @screen-sm-min) {
205 |
206 | // Scale up the controls a smidge
207 | .carousel-control {
208 | .glyphicons-chevron-left,
209 | .glyphicons-chevron-right,
210 | .icon-prev,
211 | .icon-next {
212 | width: 30px;
213 | height: 30px;
214 | margin-top: -15px;
215 | margin-left: -15px;
216 | font-size: 30px;
217 | }
218 | }
219 |
220 | // Show and left align the captions
221 | .carousel-caption {
222 | left: 20%;
223 | right: 20%;
224 | padding-bottom: 30px;
225 | }
226 |
227 | // Move up the indicators
228 | .carousel-indicators {
229 | bottom: 20px;
230 | }
231 | }
232 |
--------------------------------------------------------------------------------
/public/demo/less/responsive-utilities.less:
--------------------------------------------------------------------------------
1 | //
2 | // Responsive: Utility classes
3 | // --------------------------------------------------
4 |
5 |
6 | // IE10 in Windows (Phone) 8
7 | //
8 | // Support for responsive views via media queries is kind of borked in IE10, for
9 | // Surface/desktop in split view and for Windows Phone 8. This particular fix
10 | // must be accompanied by a snippet of JavaScript to sniff the user agent and
11 | // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
12 | // our Getting Started page for more information on this bug.
13 | //
14 | // For more information, see the following:
15 | //
16 | // Issue: https://github.com/twbs/bootstrap/issues/10497
17 | // Docs: http://getbootstrap.com/getting-started/#browsers
18 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
19 |
20 | @-ms-viewport {
21 | width: device-width;
22 | }
23 |
24 |
25 | // Visibility utilities
26 |
27 | .visible-xs {
28 | .responsive-invisibility();
29 | @media (max-width: @screen-xs-max) {
30 | .responsive-visibility();
31 | }
32 | &.visible-sm {
33 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
34 | .responsive-visibility();
35 | }
36 | }
37 | &.visible-md {
38 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
39 | .responsive-visibility();
40 | }
41 | }
42 | &.visible-lg {
43 | @media (min-width: @screen-lg-min) {
44 | .responsive-visibility();
45 | }
46 | }
47 | }
48 | .visible-sm {
49 | .responsive-invisibility();
50 | &.visible-xs {
51 | @media (max-width: @screen-xs-max) {
52 | .responsive-visibility();
53 | }
54 | }
55 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
56 | .responsive-visibility();
57 | }
58 | &.visible-md {
59 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
60 | .responsive-visibility();
61 | }
62 | }
63 | &.visible-lg {
64 | @media (min-width: @screen-lg-min) {
65 | .responsive-visibility();
66 | }
67 | }
68 | }
69 | .visible-md {
70 | .responsive-invisibility();
71 | &.visible-xs {
72 | @media (max-width: @screen-xs-max) {
73 | .responsive-visibility();
74 | }
75 | }
76 | &.visible-sm {
77 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
78 | .responsive-visibility();
79 | }
80 | }
81 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
82 | .responsive-visibility();
83 | }
84 | &.visible-lg {
85 | @media (min-width: @screen-lg-min) {
86 | .responsive-visibility();
87 | }
88 | }
89 | }
90 | .visible-lg {
91 | .responsive-invisibility();
92 | &.visible-xs {
93 | @media (max-width: @screen-xs-max) {
94 | .responsive-visibility();
95 | }
96 | }
97 | &.visible-sm {
98 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
99 | .responsive-visibility();
100 | }
101 | }
102 | &.visible-md {
103 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
104 | .responsive-visibility();
105 | }
106 | }
107 | @media (min-width: @screen-lg-min) {
108 | .responsive-visibility();
109 | }
110 | }
111 |
112 | .hidden-xs {
113 | .responsive-visibility();
114 | @media (max-width: @screen-xs-max) {
115 | .responsive-invisibility();
116 | }
117 | &.hidden-sm {
118 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
119 | .responsive-invisibility();
120 | }
121 | }
122 | &.hidden-md {
123 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
124 | .responsive-invisibility();
125 | }
126 | }
127 | &.hidden-lg {
128 | @media (min-width: @screen-lg-min) {
129 | .responsive-invisibility();
130 | }
131 | }
132 | }
133 | .hidden-sm {
134 | .responsive-visibility();
135 | &.hidden-xs {
136 | @media (max-width: @screen-xs-max) {
137 | .responsive-invisibility();
138 | }
139 | }
140 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
141 | .responsive-invisibility();
142 | }
143 | &.hidden-md {
144 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
145 | .responsive-invisibility();
146 | }
147 | }
148 | &.hidden-lg {
149 | @media (min-width: @screen-lg-min) {
150 | .responsive-invisibility();
151 | }
152 | }
153 | }
154 | .hidden-md {
155 | .responsive-visibility();
156 | &.hidden-xs {
157 | @media (max-width: @screen-xs-max) {
158 | .responsive-invisibility();
159 | }
160 | }
161 | &.hidden-sm {
162 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
163 | .responsive-invisibility();
164 | }
165 | }
166 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
167 | .responsive-invisibility();
168 | }
169 | &.hidden-lg {
170 | @media (min-width: @screen-lg-min) {
171 | .responsive-invisibility();
172 | }
173 | }
174 | }
175 | .hidden-lg {
176 | .responsive-visibility();
177 | &.hidden-xs {
178 | @media (max-width: @screen-xs-max) {
179 | .responsive-invisibility();
180 | }
181 | }
182 | &.hidden-sm {
183 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
184 | .responsive-invisibility();
185 | }
186 | }
187 | &.hidden-md {
188 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
189 | .responsive-invisibility();
190 | }
191 | }
192 | @media (min-width: @screen-lg-min) {
193 | .responsive-invisibility();
194 | }
195 | }
196 |
197 | // Print utilities
198 | .visible-print {
199 | .responsive-invisibility();
200 | }
201 |
202 | @media print {
203 | .visible-print {
204 | .responsive-visibility();
205 | }
206 | .hidden-print {
207 | .responsive-invisibility();
208 | }
209 | }
210 |
--------------------------------------------------------------------------------
/app/views/example/_example_5_7.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/app/views/example/_example_5_10.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
31 |
32 |
35 |
36 |
41 |
57 |
58 |
80 |
81 |
84 |
85 |
--------------------------------------------------------------------------------
/public/demo/less/type.less:
--------------------------------------------------------------------------------
1 | //
2 | // Typography
3 | // --------------------------------------------------
4 |
5 |
6 | // Body text
7 | // -------------------------
8 |
9 | p {
10 | margin: 0 0 (@line-height-computed / 2);
11 | }
12 | .lead {
13 | margin-bottom: @line-height-computed;
14 | font-size: floor(@font-size-base * 1.15);
15 | font-weight: 200;
16 | line-height: 1.4;
17 |
18 | @media (min-width: @screen-sm-min) {
19 | font-size: (@font-size-base * 1.5);
20 | }
21 | }
22 |
23 |
24 | // Emphasis & misc
25 | // -------------------------
26 |
27 | // Ex: 14px base font * 85% = about 12px
28 | small,
29 | .small { font-size: 85%; }
30 |
31 | // Undo browser default styling
32 | cite { font-style: normal; }
33 |
34 | // Contextual emphasis
35 | .text-muted {
36 | color: @text-muted;
37 | }
38 | .text-primary {
39 | color: @brand-primary;
40 | &:hover {
41 | color: darken(@brand-primary, 10%);
42 | }
43 | }
44 | .text-warning {
45 | color: @state-warning-text;
46 | &:hover {
47 | color: darken(@state-warning-text, 10%);
48 | }
49 | }
50 | .text-danger {
51 | color: @state-danger-text;
52 | &:hover {
53 | color: darken(@state-danger-text, 10%);
54 | }
55 | }
56 | .text-success {
57 | color: @state-success-text;
58 | }
59 | .text-info {
60 | color: @state-info-text;
61 | &:hover {
62 | color: darken(@state-info-text, 10%);
63 | }
64 | }
65 |
66 | // Alignment
67 | .text-left { text-align: left; }
68 | .text-right { text-align: right; }
69 | .text-center { text-align: center; }
70 |
71 |
72 | // Headings
73 | // -------------------------
74 |
75 | h1, h2, h3, h4, h5, h6,
76 | .h1, .h2, .h3, .h4, .h5, .h6 {
77 | font-family: @headings-font-family;
78 | font-weight: @headings-font-weight;
79 | line-height: @headings-line-height;
80 | color: @headings-color;
81 |
82 | small,
83 | .small {
84 | font-weight: normal;
85 | line-height: 1;
86 | color: @headings-small-color;
87 | }
88 | }
89 |
90 | h1,
91 | h3 {
92 | margin-top: @line-height-computed;
93 | margin-bottom: (@line-height-computed / 2);
94 |
95 | small,
96 | .small {
97 | font-size: 65%;
98 | }
99 | }
100 | h2 {
101 | margin-bottom: 5px
102 | }
103 | h4,
104 | h5,
105 | h6 {
106 | margin-top: (@line-height-computed / 2);
107 | margin-bottom: (@line-height-computed / 2);
108 |
109 | small,
110 | .small {
111 | font-size: 75%;
112 | }
113 | }
114 |
115 | h1, .h1 { font-size: @font-size-h1; }
116 | h2, .h2 { font-size: @font-size-h2; }
117 | h3, .h3 { font-size: @font-size-h3; }
118 | h4, .h4 { font-size: @font-size-h4; }
119 | h5, .h5 { font-size: @font-size-h5; }
120 | h6, .h6 { font-size: @font-size-h6; }
121 |
122 |
123 | // Page header
124 | // -------------------------
125 |
126 | .page-header {
127 | padding-bottom: ((@line-height-computed / 2) - 1);
128 | margin: (@line-height-computed * 2) 0 @line-height-computed;
129 | border-bottom: 1px solid @page-header-border-color;
130 | }
131 |
132 |
133 |
134 | // Lists
135 | // --------------------------------------------------
136 |
137 | // Unordered and Ordered lists
138 | ul,
139 | ol {
140 | margin-top: 0;
141 | margin-bottom: (@line-height-computed / 2);
142 | ul,
143 | ol {
144 | margin-bottom: 0;
145 | }
146 | }
147 |
148 | // List options
149 |
150 | // Unstyled keeps list items block level, just removes default browser padding and list-style
151 | .list-unstyled {
152 | padding-left: 0;
153 | list-style: none;
154 | }
155 |
156 | // Inline turns list items into inline-block
157 | .list-inline {
158 | .list-unstyled();
159 |
160 | > li {
161 | display: inline-block;
162 | padding-left: 5px;
163 | padding-right: 5px;
164 |
165 | &:first-child {
166 | padding-left: 0;
167 | }
168 | }
169 | }
170 |
171 | // Description Lists
172 | dl {
173 | margin-bottom: @line-height-computed;
174 | }
175 | dt,
176 | dd {
177 | line-height: @line-height-base;
178 | }
179 | dt {
180 | font-weight: bold;
181 | }
182 | dd {
183 | margin-left: 0; // Undo browser default
184 | }
185 |
186 | // Horizontal description lists
187 | //
188 | // Defaults to being stacked without any of the below styles applied, until the
189 | // grid breakpoint is reached (default of ~768px).
190 |
191 | @media (min-width: @grid-float-breakpoint) {
192 | .dl-horizontal {
193 | dt {
194 | float: left;
195 | width: (@component-offset-horizontal - 20);
196 | clear: left;
197 | text-align: right;
198 | .text-overflow();
199 | }
200 | dd {
201 | margin-left: @component-offset-horizontal;
202 | .clearfix(); // Clear the floated `dt` if an empty `dd` is present
203 | }
204 | }
205 | }
206 |
207 | // MISC
208 | // ----
209 |
210 | // Abbreviations and acronyms
211 | abbr[title],
212 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
213 | abbr[data-original-title] {
214 | cursor: help;
215 | border-bottom: 1px dotted @abbr-border-color;
216 | }
217 | abbr.initialism {
218 | font-size: 90%;
219 | text-transform: uppercase;
220 | }
221 |
222 | // Blockquotes
223 | blockquote {
224 | padding: (@line-height-computed / 2) @line-height-computed;
225 | margin: 0 0 @line-height-computed;
226 | border-left: 5px solid @blockquote-border-color;
227 | p {
228 | font-size: (@font-size-base * 1.25);
229 | font-weight: 300;
230 | line-height: 1.25;
231 | }
232 | p:last-child {
233 | margin-bottom: 0;
234 | }
235 | small {
236 | display: block;
237 | line-height: @line-height-base;
238 | color: @blockquote-small-color;
239 | &:before {
240 | content: '\2014 \00A0'; // EM DASH, NBSP
241 | }
242 | }
243 |
244 | // Float right with text-align: right
245 | &.pull-right {
246 | padding-right: 15px;
247 | padding-left: 0;
248 | border-right: 5px solid @blockquote-border-color;
249 | border-left: 0;
250 | p,
251 | small,
252 | .small {
253 | text-align: right;
254 | }
255 | small,
256 | .small {
257 | &:before {
258 | content: '';
259 | }
260 | &:after {
261 | content: '\00A0 \2014'; // NBSP, EM DASH
262 | }
263 | }
264 | }
265 | }
266 |
267 | // Quotes
268 | blockquote:before,
269 | blockquote:after {
270 | content: "";
271 | }
272 |
273 | // Addresses
274 | address {
275 | margin-bottom: @line-height-computed;
276 | font-style: normal;
277 | line-height: @line-height-base;
278 | }
279 |
--------------------------------------------------------------------------------
/app/views/example/_example_5_20.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
26 |
33 |
34 |
37 |
38 |
43 |
59 |
60 |
82 |
83 |
86 |
87 |
--------------------------------------------------------------------------------