.
9 |
10 | .list-group {
11 | // No need to set list-style: none; since .list-group-item is block level
12 | margin-bottom: 20px;
13 | padding-left: 0; // reset padding because ul and ol
14 | }
15 |
16 |
17 | // Individual list items
18 | //
19 | // Use on `li`s or `div`s within the `.list-group` parent.
20 |
21 | .list-group-item {
22 | position: relative;
23 | display: block;
24 | padding: 10px 15px;
25 | // Place the border on the list items and negative margin up for better styling
26 | margin-bottom: -1px;
27 | background-color: @list-group-bg;
28 | border: 1px solid @list-group-border;
29 |
30 | // Round the first and last items
31 | &:first-child {
32 | .border-top-radius(@list-group-border-radius);
33 | }
34 | &:last-child {
35 | margin-bottom: 0;
36 | .border-bottom-radius(@list-group-border-radius);
37 | }
38 | }
39 |
40 |
41 | // Linked list items
42 | //
43 | // Use anchor elements instead of `li`s or `div`s to create linked list items.
44 | // Includes an extra `.active` modifier class for showing selected items.
45 |
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-link-hover-color;
58 | background-color: @list-group-hover-bg;
59 | }
60 | }
61 |
62 | .list-group-item {
63 | // Disabled state
64 | &.disabled,
65 | &.disabled:hover,
66 | &.disabled:focus {
67 | background-color: @list-group-disabled-bg;
68 | color: @list-group-disabled-color;
69 | cursor: @cursor-disabled;
70 |
71 | // Force color to inherit for custom content
72 | .list-group-item-heading {
73 | color: inherit;
74 | }
75 | .list-group-item-text {
76 | color: @list-group-disabled-text-color;
77 | }
78 | }
79 |
80 | // Active class on item itself, not parent
81 | &.active,
82 | &.active:hover,
83 | &.active:focus {
84 | z-index: 2; // Place active items above their siblings for proper border styling
85 | color: @list-group-active-color;
86 | background-color: @list-group-active-bg;
87 | border-color: @list-group-active-border;
88 |
89 | // Force color to inherit for custom content
90 | .list-group-item-heading,
91 | .list-group-item-heading > small,
92 | .list-group-item-heading > .small {
93 | color: inherit;
94 | }
95 | .list-group-item-text {
96 | color: @list-group-active-text-color;
97 | }
98 | }
99 | }
100 |
101 |
102 | // Contextual variants
103 | //
104 | // Add modifier classes to change text and background color on individual items.
105 | // Organizationally, this must come after the `:hover` states.
106 |
107 | .list-group-item-variant(success; @state-success-bg; @state-success-text);
108 | .list-group-item-variant(info; @state-info-bg; @state-info-text);
109 | .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
110 | .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
111 |
112 |
113 | // Custom content options
114 | //
115 | // Extra classes for creating well-formatted content within `.list-group-item`s.
116 |
117 | .list-group-item-heading {
118 | margin-top: 0;
119 | margin-bottom: 5px;
120 | }
121 | .list-group-item-text {
122 | margin-bottom: 0;
123 | line-height: 1.3;
124 | }
125 |
--------------------------------------------------------------------------------
/styles/bootstrap/media.less:
--------------------------------------------------------------------------------
1 | .media {
2 | // Proper spacing between instances of .media
3 | margin-top: 15px;
4 |
5 | &:first-child {
6 | margin-top: 0;
7 | }
8 | }
9 |
10 | .media-right,
11 | .media > .pull-right {
12 | padding-left: 10px;
13 | }
14 |
15 | .media-left,
16 | .media > .pull-left {
17 | padding-right: 10px;
18 | }
19 |
20 | .media-left,
21 | .media-right,
22 | .media-body {
23 | display: table-cell;
24 | vertical-align: top;
25 | }
26 |
27 | .media-middle {
28 | vertical-align: middle;
29 | }
30 |
31 | .media-bottom {
32 | vertical-align: bottom;
33 | }
34 |
35 | // Reset margins on headings for tighter default spacing
36 | .media-heading {
37 | margin-top: 0;
38 | margin-bottom: 5px;
39 | }
40 |
41 | // Media list variation
42 | //
43 | // Undo default ul/ol styles
44 | .media-list {
45 | padding-left: 0;
46 | list-style: none;
47 | }
48 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins.less:
--------------------------------------------------------------------------------
1 | // Mixins
2 | // --------------------------------------------------
3 |
4 | // Utilities
5 | @import "mixins/hide-text.less";
6 | @import "mixins/opacity.less";
7 | @import "mixins/image.less";
8 | @import "mixins/labels.less";
9 | @import "mixins/reset-filter.less";
10 | @import "mixins/resize.less";
11 | @import "mixins/responsive-visibility.less";
12 | @import "mixins/size.less";
13 | @import "mixins/tab-focus.less";
14 | @import "mixins/text-emphasis.less";
15 | @import "mixins/text-overflow.less";
16 | @import "mixins/vendor-prefixes.less";
17 |
18 | // Components
19 | @import "mixins/alerts.less";
20 | @import "mixins/buttons.less";
21 | @import "mixins/panels.less";
22 | @import "mixins/pagination.less";
23 | @import "mixins/list-group.less";
24 | @import "mixins/nav-divider.less";
25 | @import "mixins/forms.less";
26 | @import "mixins/progress-bar.less";
27 | @import "mixins/table-row.less";
28 |
29 | // Skins
30 | @import "mixins/background-variant.less";
31 | @import "mixins/border-radius.less";
32 | @import "mixins/gradients.less";
33 |
34 | // Layout
35 | @import "mixins/clearfix.less";
36 | @import "mixins/center-block.less";
37 | @import "mixins/nav-vertical-align.less";
38 | @import "mixins/grid-framework.less";
39 | @import "mixins/grid.less";
40 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/alerts.less:
--------------------------------------------------------------------------------
1 | // Alerts
2 |
3 | .alert-variant(@background; @border; @text-color) {
4 | background-color: @background;
5 | border-color: @border;
6 | color: @text-color;
7 |
8 | hr {
9 | border-top-color: darken(@border, 5%);
10 | }
11 | .alert-link {
12 | color: darken(@text-color, 10%);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/background-variant.less:
--------------------------------------------------------------------------------
1 | // Contextual backgrounds
2 |
3 | .bg-variant(@color) {
4 | background-color: @color;
5 | a&:hover {
6 | background-color: darken(@color, 10%);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/border-radius.less:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | .border-top-radius(@radius) {
4 | border-top-right-radius: @radius;
5 | border-top-left-radius: @radius;
6 | }
7 | .border-right-radius(@radius) {
8 | border-bottom-right-radius: @radius;
9 | border-top-right-radius: @radius;
10 | }
11 | .border-bottom-radius(@radius) {
12 | border-bottom-right-radius: @radius;
13 | border-bottom-left-radius: @radius;
14 | }
15 | .border-left-radius(@radius) {
16 | border-bottom-left-radius: @radius;
17 | border-top-left-radius: @radius;
18 | }
19 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/buttons.less:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | .button-variant(@color; @background; @border) {
7 | color: @color;
8 | background-color: @background;
9 | border-color: @border;
10 |
11 | &:hover,
12 | &:focus,
13 | &.focus,
14 | &:active,
15 | &.active,
16 | .open > .dropdown-toggle& {
17 | color: @color;
18 | background-color: darken(@background, 10%);
19 | border-color: darken(@border, 12%);
20 | }
21 | &:active,
22 | &.active,
23 | .open > .dropdown-toggle& {
24 | background-image: none;
25 | }
26 | &.disabled,
27 | &[disabled],
28 | fieldset[disabled] & {
29 | &,
30 | &:hover,
31 | &:focus,
32 | &.focus,
33 | &:active,
34 | &.active {
35 | background-color: @background;
36 | border-color: @border;
37 | }
38 | }
39 |
40 | .badge {
41 | color: @background;
42 | background-color: @color;
43 | }
44 | }
45 |
46 | // Button sizes
47 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
48 | padding: @padding-vertical @padding-horizontal;
49 | font-size: @font-size;
50 | line-height: @line-height;
51 | border-radius: @border-radius;
52 | }
53 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/center-block.less:
--------------------------------------------------------------------------------
1 | // Center-align a block level element
2 |
3 | .center-block() {
4 | display: block;
5 | margin-left: auto;
6 | margin-right: auto;
7 | }
8 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/clearfix.less:
--------------------------------------------------------------------------------
1 | // Clearfix
2 | //
3 | // For modern browsers
4 | // 1. The space content is one way to avoid an Opera bug when the
5 | // contenteditable attribute is included anywhere else in the document.
6 | // Otherwise it causes space to appear at the top and bottom of elements
7 | // that are clearfixed.
8 | // 2. The use of `table` rather than `block` is only necessary if using
9 | // `:before` to contain the top-margins of child elements.
10 | //
11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/
12 |
13 | .clearfix() {
14 | &:before,
15 | &:after {
16 | content: " "; // 1
17 | display: table; // 2
18 | }
19 | &:after {
20 | clear: both;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/styles/bootstrap/mixins/forms.less:
--------------------------------------------------------------------------------
1 | // Form validation states
2 | //
3 | // Used in forms.less to generate the form validation CSS for warnings, errors,
4 | // and successes.
5 |
6 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
7 | // Color the label and help text
8 | .help-block,
9 | .control-label,
10 | .radio,
11 | .checkbox,
12 | .radio-inline,
13 | .checkbox-inline,
14 | &.radio label,
15 | &.checkbox label,
16 | &.radio-inline label,
17 | &.checkbox-inline label {
18 | color: @text-color;
19 | }
20 | // Set the border and box shadow on specific inputs to match
21 | .form-control {
22 | border-color: @border-color;
23 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
24 | &:focus {
25 | border-color: darken(@border-color, 10%);
26 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
27 | .box-shadow(@shadow);
28 | }
29 | }
30 | // Set validation states also for addons
31 | .input-group-addon {
32 | color: @text-color;
33 | border-color: @border-color;
34 | background-color: @background-color;
35 | }
36 | // Optional feedback icon
37 | .form-control-feedback {
38 | color: @text-color;
39 | }
40 | }
41 |
42 |
43 | // Form control focus state
44 | //
45 | // Generate a customized focus state and for any input with the specified color,
46 | // which defaults to the `@input-border-focus` variable.
47 | //
48 | // We highly encourage you to not customize the default value, but instead use
49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
50 | // WebKit's default styles, but applicable to a wider range of browsers. Its
51 | // usability and accessibility should be taken into account with any change.
52 | //
53 | // Example usage: change the default blue border and shadow to white for better
54 | // contrast against a dark gray background.
55 | .form-control-focus(@color: @input-border-focus) {
56 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
57 | &:focus {
58 | border-color: @color;
59 | outline: 0;
60 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
61 | }
62 | }
63 |
64 | // Form control sizing
65 | //
66 | // Relative text size, padding, and border-radii changes for form controls. For
67 | // horizontal sizing, wrap controls in the predefined grid classes. `