jekyll-theme-cs50 0.1.3
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 +7 -0
- data/LICENSE.txt +21 -0
- data/_includes/aside.html +24 -0
- data/_includes/footer.md +0 -0
- data/_includes/header.md +0 -0
- data/_includes/main.html +5 -0
- data/_includes/nav.md +0 -0
- data/_layouts/page.html +136 -0
- data/_sass/jekyll-theme-cs50.scss +314 -0
- data/_sass/node_modules/bootstrap/LICENSE +22 -0
- data/_sass/node_modules/bootstrap/scss/_alert.scss +51 -0
- data/_sass/node_modules/bootstrap/scss/_badge.scss +53 -0
- data/_sass/node_modules/bootstrap/scss/_breadcrumb.scss +41 -0
- data/_sass/node_modules/bootstrap/scss/_button-group.scss +163 -0
- data/_sass/node_modules/bootstrap/scss/_buttons.scss +140 -0
- data/_sass/node_modules/bootstrap/scss/_card.scss +310 -0
- data/_sass/node_modules/bootstrap/scss/_carousel.scss +198 -0
- data/_sass/node_modules/bootstrap/scss/_close.scss +44 -0
- data/_sass/node_modules/bootstrap/scss/_code.scss +48 -0
- data/_sass/node_modules/bootstrap/scss/_custom-forms.scss +507 -0
- data/_sass/node_modules/bootstrap/scss/_dropdown.scss +191 -0
- data/_sass/node_modules/bootstrap/scss/_forms.scss +334 -0
- data/_sass/node_modules/bootstrap/scss/_functions.scss +86 -0
- data/_sass/node_modules/bootstrap/scss/_grid.scss +52 -0
- data/_sass/node_modules/bootstrap/scss/_images.scss +42 -0
- data/_sass/node_modules/bootstrap/scss/_input-group.scss +193 -0
- data/_sass/node_modules/bootstrap/scss/_jumbotron.scss +16 -0
- data/_sass/node_modules/bootstrap/scss/_list-group.scss +121 -0
- data/_sass/node_modules/bootstrap/scss/_media.scss +8 -0
- data/_sass/node_modules/bootstrap/scss/_mixins.scss +41 -0
- data/_sass/node_modules/bootstrap/scss/_modal.scss +186 -0
- data/_sass/node_modules/bootstrap/scss/_nav.scss +120 -0
- data/_sass/node_modules/bootstrap/scss/_navbar.scss +299 -0
- data/_sass/node_modules/bootstrap/scss/_pagination.scss +78 -0
- data/_sass/node_modules/bootstrap/scss/_popover.scss +183 -0
- data/_sass/node_modules/bootstrap/scss/_print.scss +141 -0
- data/_sass/node_modules/bootstrap/scss/_progress.scss +34 -0
- data/_sass/node_modules/bootstrap/scss/_reboot.scss +462 -0
- data/_sass/node_modules/bootstrap/scss/_root.scss +19 -0
- data/_sass/node_modules/bootstrap/scss/_spinners.scss +53 -0
- data/_sass/node_modules/bootstrap/scss/_tables.scss +187 -0
- data/_sass/node_modules/bootstrap/scss/_toasts.scss +43 -0
- data/_sass/node_modules/bootstrap/scss/_tooltip.scss +115 -0
- data/_sass/node_modules/bootstrap/scss/_transitions.scss +22 -0
- data/_sass/node_modules/bootstrap/scss/_type.scss +125 -0
- data/_sass/node_modules/bootstrap/scss/_utilities.scss +16 -0
- data/_sass/node_modules/bootstrap/scss/_variables.scss +1091 -0
- data/_sass/node_modules/bootstrap/scss/bootstrap-grid.scss +29 -0
- data/_sass/node_modules/bootstrap/scss/bootstrap-reboot.scss +12 -0
- data/_sass/node_modules/bootstrap/scss/bootstrap.scss +44 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_alert.scss +13 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_background-variant.scss +21 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_badge.scss +11 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_border-radius.scss +35 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_box-shadow.scss +5 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_breakpoints.scss +123 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_buttons.scss +111 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_caret.scss +62 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_clearfix.scss +7 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_float.scss +11 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_forms.scss +198 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_gradients.scss +45 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_grid-framework.scss +66 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_grid.scss +51 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_hover.scss +37 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_image.scss +36 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_list-group.scss +21 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_lists.scss +7 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_nav-divider.scss +10 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_pagination.scss +22 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_reset-text.scss +17 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_resize.scss +6 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_screen-reader.scss +33 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_size.scss +6 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_table-row.scss +39 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_text-emphasis.scss +14 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_text-hide.scss +13 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_text-truncate.scss +8 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_transition.scss +16 -0
- data/_sass/node_modules/bootstrap/scss/mixins/_visibility.scss +7 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_align.scss +8 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_background.scss +19 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_borders.scss +63 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_clearfix.scss +3 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_display.scss +38 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_embed.scss +39 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_flex.scss +51 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_float.scss +9 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_overflow.scss +5 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_position.scss +32 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_screenreaders.scss +11 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_shadows.scss +6 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_sizing.scss +20 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_spacing.scss +73 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_text.scss +67 -0
- data/_sass/node_modules/bootstrap/scss/utilities/_visibility.scss +11 -0
- data/_sass/node_modules/primer-markdown/build/build.scss +1 -0
- data/_sass/package.json +12 -0
- data/assets/css/style.scss +4 -0
- metadata +266 -0
@@ -0,0 +1,163 @@
|
|
1
|
+
// stylelint-disable selector-no-qualifying-type
|
2
|
+
|
3
|
+
// Make the div behave like a button
|
4
|
+
.btn-group,
|
5
|
+
.btn-group-vertical {
|
6
|
+
position: relative;
|
7
|
+
display: inline-flex;
|
8
|
+
vertical-align: middle; // match .btn alignment given font-size hack above
|
9
|
+
|
10
|
+
> .btn {
|
11
|
+
position: relative;
|
12
|
+
flex: 1 1 auto;
|
13
|
+
|
14
|
+
// Bring the hover, focused, and "active" buttons to the front to overlay
|
15
|
+
// the borders properly
|
16
|
+
@include hover {
|
17
|
+
z-index: 1;
|
18
|
+
}
|
19
|
+
&:focus,
|
20
|
+
&:active,
|
21
|
+
&.active {
|
22
|
+
z-index: 1;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
// Optional: Group multiple button groups together for a toolbar
|
28
|
+
.btn-toolbar {
|
29
|
+
display: flex;
|
30
|
+
flex-wrap: wrap;
|
31
|
+
justify-content: flex-start;
|
32
|
+
|
33
|
+
.input-group {
|
34
|
+
width: auto;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
.btn-group {
|
39
|
+
// Prevent double borders when buttons are next to each other
|
40
|
+
> .btn:not(:first-child),
|
41
|
+
> .btn-group:not(:first-child) {
|
42
|
+
margin-left: -$btn-border-width;
|
43
|
+
}
|
44
|
+
|
45
|
+
// Reset rounded corners
|
46
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
47
|
+
> .btn-group:not(:last-child) > .btn {
|
48
|
+
@include border-right-radius(0);
|
49
|
+
}
|
50
|
+
|
51
|
+
> .btn:not(:first-child),
|
52
|
+
> .btn-group:not(:first-child) > .btn {
|
53
|
+
@include border-left-radius(0);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
// Sizing
|
58
|
+
//
|
59
|
+
// Remix the default button sizing classes into new ones for easier manipulation.
|
60
|
+
|
61
|
+
.btn-group-sm > .btn { @extend .btn-sm; }
|
62
|
+
.btn-group-lg > .btn { @extend .btn-lg; }
|
63
|
+
|
64
|
+
|
65
|
+
//
|
66
|
+
// Split button dropdowns
|
67
|
+
//
|
68
|
+
|
69
|
+
.dropdown-toggle-split {
|
70
|
+
padding-right: $btn-padding-x * .75;
|
71
|
+
padding-left: $btn-padding-x * .75;
|
72
|
+
|
73
|
+
&::after,
|
74
|
+
.dropup &::after,
|
75
|
+
.dropright &::after {
|
76
|
+
margin-left: 0;
|
77
|
+
}
|
78
|
+
|
79
|
+
.dropleft &::before {
|
80
|
+
margin-right: 0;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
.btn-sm + .dropdown-toggle-split {
|
85
|
+
padding-right: $btn-padding-x-sm * .75;
|
86
|
+
padding-left: $btn-padding-x-sm * .75;
|
87
|
+
}
|
88
|
+
|
89
|
+
.btn-lg + .dropdown-toggle-split {
|
90
|
+
padding-right: $btn-padding-x-lg * .75;
|
91
|
+
padding-left: $btn-padding-x-lg * .75;
|
92
|
+
}
|
93
|
+
|
94
|
+
|
95
|
+
// The clickable button for toggling the menu
|
96
|
+
// Set the same inset shadow as the :active state
|
97
|
+
.btn-group.show .dropdown-toggle {
|
98
|
+
@include box-shadow($btn-active-box-shadow);
|
99
|
+
|
100
|
+
// Show no shadow for `.btn-link` since it has no other button styles.
|
101
|
+
&.btn-link {
|
102
|
+
@include box-shadow(none);
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
|
107
|
+
//
|
108
|
+
// Vertical button groups
|
109
|
+
//
|
110
|
+
|
111
|
+
.btn-group-vertical {
|
112
|
+
flex-direction: column;
|
113
|
+
align-items: flex-start;
|
114
|
+
justify-content: center;
|
115
|
+
|
116
|
+
> .btn,
|
117
|
+
> .btn-group {
|
118
|
+
width: 100%;
|
119
|
+
}
|
120
|
+
|
121
|
+
> .btn:not(:first-child),
|
122
|
+
> .btn-group:not(:first-child) {
|
123
|
+
margin-top: -$btn-border-width;
|
124
|
+
}
|
125
|
+
|
126
|
+
// Reset rounded corners
|
127
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
128
|
+
> .btn-group:not(:last-child) > .btn {
|
129
|
+
@include border-bottom-radius(0);
|
130
|
+
}
|
131
|
+
|
132
|
+
> .btn:not(:first-child),
|
133
|
+
> .btn-group:not(:first-child) > .btn {
|
134
|
+
@include border-top-radius(0);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// Checkbox and radio options
|
140
|
+
//
|
141
|
+
// In order to support the browser's form validation feedback, powered by the
|
142
|
+
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
143
|
+
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
144
|
+
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
145
|
+
// certain cases which is prevented by using `clip` and `pointer-events`.
|
146
|
+
// This way, we ensure a DOM element is visible to position the popover from.
|
147
|
+
//
|
148
|
+
// See https://github.com/twbs/bootstrap/pull/12794 and
|
149
|
+
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
150
|
+
|
151
|
+
.btn-group-toggle {
|
152
|
+
> .btn,
|
153
|
+
> .btn-group > .btn {
|
154
|
+
margin-bottom: 0; // Override default `<label>` value
|
155
|
+
|
156
|
+
input[type="radio"],
|
157
|
+
input[type="checkbox"] {
|
158
|
+
position: absolute;
|
159
|
+
clip: rect(0, 0, 0, 0);
|
160
|
+
pointer-events: none;
|
161
|
+
}
|
162
|
+
}
|
163
|
+
}
|
@@ -0,0 +1,140 @@
|
|
1
|
+
// stylelint-disable selector-no-qualifying-type
|
2
|
+
|
3
|
+
//
|
4
|
+
// Base styles
|
5
|
+
//
|
6
|
+
|
7
|
+
.btn {
|
8
|
+
display: inline-block;
|
9
|
+
font-weight: $btn-font-weight;
|
10
|
+
color: $body-color;
|
11
|
+
text-align: center;
|
12
|
+
vertical-align: middle;
|
13
|
+
user-select: none;
|
14
|
+
background-color: transparent;
|
15
|
+
border: $btn-border-width solid transparent;
|
16
|
+
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
17
|
+
@include transition($btn-transition);
|
18
|
+
|
19
|
+
@include hover {
|
20
|
+
color: $body-color;
|
21
|
+
text-decoration: none;
|
22
|
+
}
|
23
|
+
|
24
|
+
&:focus,
|
25
|
+
&.focus {
|
26
|
+
outline: 0;
|
27
|
+
box-shadow: $btn-focus-box-shadow;
|
28
|
+
}
|
29
|
+
|
30
|
+
// Disabled comes first so active can properly restyle
|
31
|
+
&.disabled,
|
32
|
+
&:disabled {
|
33
|
+
opacity: $btn-disabled-opacity;
|
34
|
+
@include box-shadow(none);
|
35
|
+
}
|
36
|
+
|
37
|
+
// Opinionated: add "hand" cursor to non-disabled .btn elements
|
38
|
+
&:not(:disabled):not(.disabled) {
|
39
|
+
cursor: pointer;
|
40
|
+
}
|
41
|
+
|
42
|
+
&:not(:disabled):not(.disabled):active,
|
43
|
+
&:not(:disabled):not(.disabled).active {
|
44
|
+
@include box-shadow($btn-active-box-shadow);
|
45
|
+
|
46
|
+
&:focus {
|
47
|
+
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// Future-proof disabling of clicks on `<a>` elements
|
53
|
+
a.btn.disabled,
|
54
|
+
fieldset:disabled a.btn {
|
55
|
+
pointer-events: none;
|
56
|
+
}
|
57
|
+
|
58
|
+
|
59
|
+
//
|
60
|
+
// Alternate buttons
|
61
|
+
//
|
62
|
+
|
63
|
+
@each $color, $value in $theme-colors {
|
64
|
+
.btn-#{$color} {
|
65
|
+
@include button-variant($value, $value);
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
@each $color, $value in $theme-colors {
|
70
|
+
.btn-outline-#{$color} {
|
71
|
+
@include button-outline-variant($value);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
|
76
|
+
//
|
77
|
+
// Link buttons
|
78
|
+
//
|
79
|
+
|
80
|
+
// Make a button look and behave like a link
|
81
|
+
.btn-link {
|
82
|
+
font-weight: $font-weight-normal;
|
83
|
+
color: $link-color;
|
84
|
+
|
85
|
+
@include hover {
|
86
|
+
color: $link-hover-color;
|
87
|
+
text-decoration: $link-hover-decoration;
|
88
|
+
}
|
89
|
+
|
90
|
+
&:focus,
|
91
|
+
&.focus {
|
92
|
+
text-decoration: $link-hover-decoration;
|
93
|
+
box-shadow: none;
|
94
|
+
}
|
95
|
+
|
96
|
+
&:disabled,
|
97
|
+
&.disabled {
|
98
|
+
color: $btn-link-disabled-color;
|
99
|
+
pointer-events: none;
|
100
|
+
}
|
101
|
+
|
102
|
+
// No need for an active state here
|
103
|
+
}
|
104
|
+
|
105
|
+
|
106
|
+
//
|
107
|
+
// Button Sizes
|
108
|
+
//
|
109
|
+
|
110
|
+
.btn-lg {
|
111
|
+
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
112
|
+
}
|
113
|
+
|
114
|
+
.btn-sm {
|
115
|
+
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
|
116
|
+
}
|
117
|
+
|
118
|
+
|
119
|
+
//
|
120
|
+
// Block button
|
121
|
+
//
|
122
|
+
|
123
|
+
.btn-block {
|
124
|
+
display: block;
|
125
|
+
width: 100%;
|
126
|
+
|
127
|
+
// Vertically space out multiple block buttons
|
128
|
+
+ .btn-block {
|
129
|
+
margin-top: $btn-block-spacing-y;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
// Specificity overrides
|
134
|
+
input[type="submit"],
|
135
|
+
input[type="reset"],
|
136
|
+
input[type="button"] {
|
137
|
+
&.btn-block {
|
138
|
+
width: 100%;
|
139
|
+
}
|
140
|
+
}
|
@@ -0,0 +1,310 @@
|
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.card {
|
6
|
+
position: relative;
|
7
|
+
display: flex;
|
8
|
+
flex-direction: column;
|
9
|
+
min-width: 0;
|
10
|
+
word-wrap: break-word;
|
11
|
+
background-color: $card-bg;
|
12
|
+
background-clip: border-box;
|
13
|
+
border: $card-border-width solid $card-border-color;
|
14
|
+
@include border-radius($card-border-radius);
|
15
|
+
|
16
|
+
> hr {
|
17
|
+
margin-right: 0;
|
18
|
+
margin-left: 0;
|
19
|
+
}
|
20
|
+
|
21
|
+
> .list-group:first-child {
|
22
|
+
.list-group-item:first-child {
|
23
|
+
@include border-top-radius($card-border-radius);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
> .list-group:last-child {
|
28
|
+
.list-group-item:last-child {
|
29
|
+
@include border-bottom-radius($card-border-radius);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
.card-body {
|
35
|
+
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
36
|
+
// as much space as possible, ensuring footers are aligned to the bottom.
|
37
|
+
flex: 1 1 auto;
|
38
|
+
padding: $card-spacer-x;
|
39
|
+
}
|
40
|
+
|
41
|
+
.card-title {
|
42
|
+
margin-bottom: $card-spacer-y;
|
43
|
+
}
|
44
|
+
|
45
|
+
.card-subtitle {
|
46
|
+
margin-top: -$card-spacer-y / 2;
|
47
|
+
margin-bottom: 0;
|
48
|
+
}
|
49
|
+
|
50
|
+
.card-text:last-child {
|
51
|
+
margin-bottom: 0;
|
52
|
+
}
|
53
|
+
|
54
|
+
.card-link {
|
55
|
+
@include hover {
|
56
|
+
text-decoration: none;
|
57
|
+
}
|
58
|
+
|
59
|
+
+ .card-link {
|
60
|
+
margin-left: $card-spacer-x;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
//
|
65
|
+
// Optional textual caps
|
66
|
+
//
|
67
|
+
|
68
|
+
.card-header {
|
69
|
+
padding: $card-spacer-y $card-spacer-x;
|
70
|
+
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
71
|
+
color: $card-cap-color;
|
72
|
+
background-color: $card-cap-bg;
|
73
|
+
border-bottom: $card-border-width solid $card-border-color;
|
74
|
+
|
75
|
+
&:first-child {
|
76
|
+
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
77
|
+
}
|
78
|
+
|
79
|
+
+ .list-group {
|
80
|
+
.list-group-item:first-child {
|
81
|
+
border-top: 0;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.card-footer {
|
87
|
+
padding: $card-spacer-y $card-spacer-x;
|
88
|
+
background-color: $card-cap-bg;
|
89
|
+
border-top: $card-border-width solid $card-border-color;
|
90
|
+
|
91
|
+
&:last-child {
|
92
|
+
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
|
97
|
+
//
|
98
|
+
// Header navs
|
99
|
+
//
|
100
|
+
|
101
|
+
.card-header-tabs {
|
102
|
+
margin-right: -$card-spacer-x / 2;
|
103
|
+
margin-bottom: -$card-spacer-y;
|
104
|
+
margin-left: -$card-spacer-x / 2;
|
105
|
+
border-bottom: 0;
|
106
|
+
}
|
107
|
+
|
108
|
+
.card-header-pills {
|
109
|
+
margin-right: -$card-spacer-x / 2;
|
110
|
+
margin-left: -$card-spacer-x / 2;
|
111
|
+
}
|
112
|
+
|
113
|
+
// Card image
|
114
|
+
.card-img-overlay {
|
115
|
+
position: absolute;
|
116
|
+
top: 0;
|
117
|
+
right: 0;
|
118
|
+
bottom: 0;
|
119
|
+
left: 0;
|
120
|
+
padding: $card-img-overlay-padding;
|
121
|
+
}
|
122
|
+
|
123
|
+
.card-img {
|
124
|
+
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
125
|
+
@include border-radius($card-inner-border-radius);
|
126
|
+
}
|
127
|
+
|
128
|
+
// Card image caps
|
129
|
+
.card-img-top {
|
130
|
+
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
131
|
+
@include border-top-radius($card-inner-border-radius);
|
132
|
+
}
|
133
|
+
|
134
|
+
.card-img-bottom {
|
135
|
+
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
136
|
+
@include border-bottom-radius($card-inner-border-radius);
|
137
|
+
}
|
138
|
+
|
139
|
+
|
140
|
+
// Card deck
|
141
|
+
|
142
|
+
.card-deck {
|
143
|
+
display: flex;
|
144
|
+
flex-direction: column;
|
145
|
+
|
146
|
+
.card {
|
147
|
+
margin-bottom: $card-deck-margin;
|
148
|
+
}
|
149
|
+
|
150
|
+
@include media-breakpoint-up(sm) {
|
151
|
+
flex-flow: row wrap;
|
152
|
+
margin-right: -$card-deck-margin;
|
153
|
+
margin-left: -$card-deck-margin;
|
154
|
+
|
155
|
+
.card {
|
156
|
+
display: flex;
|
157
|
+
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
158
|
+
flex: 1 0 0%;
|
159
|
+
flex-direction: column;
|
160
|
+
margin-right: $card-deck-margin;
|
161
|
+
margin-bottom: 0; // Override the default
|
162
|
+
margin-left: $card-deck-margin;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
}
|
166
|
+
|
167
|
+
|
168
|
+
//
|
169
|
+
// Card groups
|
170
|
+
//
|
171
|
+
|
172
|
+
.card-group {
|
173
|
+
display: flex;
|
174
|
+
flex-direction: column;
|
175
|
+
|
176
|
+
// The child selector allows nested `.card` within `.card-group`
|
177
|
+
// to display properly.
|
178
|
+
> .card {
|
179
|
+
margin-bottom: $card-group-margin;
|
180
|
+
}
|
181
|
+
|
182
|
+
@include media-breakpoint-up(sm) {
|
183
|
+
flex-flow: row wrap;
|
184
|
+
// The child selector allows nested `.card` within `.card-group`
|
185
|
+
// to display properly.
|
186
|
+
> .card {
|
187
|
+
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
188
|
+
flex: 1 0 0%;
|
189
|
+
margin-bottom: 0;
|
190
|
+
|
191
|
+
+ .card {
|
192
|
+
margin-left: 0;
|
193
|
+
border-left: 0;
|
194
|
+
}
|
195
|
+
|
196
|
+
// Handle rounded corners
|
197
|
+
@if $enable-rounded {
|
198
|
+
&:first-child {
|
199
|
+
@include border-right-radius(0);
|
200
|
+
|
201
|
+
.card-img-top,
|
202
|
+
.card-header {
|
203
|
+
border-top-right-radius: 0;
|
204
|
+
}
|
205
|
+
.card-img-bottom,
|
206
|
+
.card-footer {
|
207
|
+
border-bottom-right-radius: 0;
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
&:last-child {
|
212
|
+
@include border-left-radius(0);
|
213
|
+
|
214
|
+
.card-img-top,
|
215
|
+
.card-header {
|
216
|
+
border-top-left-radius: 0;
|
217
|
+
}
|
218
|
+
.card-img-bottom,
|
219
|
+
.card-footer {
|
220
|
+
border-bottom-left-radius: 0;
|
221
|
+
}
|
222
|
+
}
|
223
|
+
|
224
|
+
&:only-child {
|
225
|
+
@include border-radius($card-border-radius);
|
226
|
+
|
227
|
+
.card-img-top,
|
228
|
+
.card-header {
|
229
|
+
@include border-top-radius($card-border-radius);
|
230
|
+
}
|
231
|
+
.card-img-bottom,
|
232
|
+
.card-footer {
|
233
|
+
@include border-bottom-radius($card-border-radius);
|
234
|
+
}
|
235
|
+
}
|
236
|
+
|
237
|
+
&:not(:first-child):not(:last-child):not(:only-child) {
|
238
|
+
@include border-radius(0);
|
239
|
+
|
240
|
+
.card-img-top,
|
241
|
+
.card-img-bottom,
|
242
|
+
.card-header,
|
243
|
+
.card-footer {
|
244
|
+
@include border-radius(0);
|
245
|
+
}
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
}
|
250
|
+
}
|
251
|
+
|
252
|
+
|
253
|
+
//
|
254
|
+
// Columns
|
255
|
+
//
|
256
|
+
|
257
|
+
.card-columns {
|
258
|
+
.card {
|
259
|
+
margin-bottom: $card-columns-margin;
|
260
|
+
}
|
261
|
+
|
262
|
+
@include media-breakpoint-up(sm) {
|
263
|
+
column-count: $card-columns-count;
|
264
|
+
column-gap: $card-columns-gap;
|
265
|
+
orphans: 1;
|
266
|
+
widows: 1;
|
267
|
+
|
268
|
+
.card {
|
269
|
+
display: inline-block; // Don't let them vertically span multiple columns
|
270
|
+
width: 100%; // Don't let their width change
|
271
|
+
}
|
272
|
+
}
|
273
|
+
}
|
274
|
+
|
275
|
+
|
276
|
+
//
|
277
|
+
// Accordion
|
278
|
+
//
|
279
|
+
|
280
|
+
.accordion {
|
281
|
+
.card {
|
282
|
+
overflow: hidden;
|
283
|
+
|
284
|
+
&:not(:first-of-type) {
|
285
|
+
.card-header:first-child {
|
286
|
+
border-radius: 0;
|
287
|
+
}
|
288
|
+
|
289
|
+
&:not(:last-of-type) {
|
290
|
+
border-bottom: 0;
|
291
|
+
border-radius: 0;
|
292
|
+
}
|
293
|
+
}
|
294
|
+
|
295
|
+
&:first-of-type {
|
296
|
+
border-bottom: 0;
|
297
|
+
border-bottom-right-radius: 0;
|
298
|
+
border-bottom-left-radius: 0;
|
299
|
+
}
|
300
|
+
|
301
|
+
&:last-of-type {
|
302
|
+
border-top-left-radius: 0;
|
303
|
+
border-top-right-radius: 0;
|
304
|
+
}
|
305
|
+
|
306
|
+
.card-header {
|
307
|
+
margin-bottom: -$card-border-width;
|
308
|
+
}
|
309
|
+
}
|
310
|
+
}
|