Skip to content

Commit 70b7a56

Browse files
MarkLambeMarkLambe
committed
feat(bootstrap4-theme): add card checkboxes
1 parent 39584c6 commit 70b7a56

File tree

4 files changed

+158
-0
lines changed

4 files changed

+158
-0
lines changed

‎packages/bootstrap4-theme/src/scss/extends/_cards.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ Cards - Table of Contents
6666
margin: $uds-component-card-basic-icon-top-margin;
6767
}
6868

69+
.card-image-content {
70+
position: relative;
71+
}
72+
6973
.card-img-top img,
7074
.card-img-top {
7175
max-width: $uds-component-card-basic-image-top-width-percent;
@@ -738,3 +742,55 @@ Cards - Table of Contents
738742
@include uds-quicklinks-expanded;
739743
}
740744
}
745+
746+
/*------------------------------------------------------------------
747+
11. Checkbox Stacked Cards
748+
--------------------------------------------------------------------*/
749+
750+
.card-story-checkbox-stacked .card-header .card-title:after {
751+
content: $uds-component-card-degree-title-underline-content;
752+
width: $uds-component-card-degree-title-underline-width;
753+
height: $uds-component-card-degree-title-underline-height;
754+
display: $uds-component-card-degree-title-underline-display;
755+
margin-top: $uds-component-card-degree-title-underline-margin-top;
756+
}
757+
758+
.card-story-checkbox-stacked .card-header {
759+
position: relative;
760+
}
761+
762+
.card-story-checkbox-stacked .card-form {
763+
position: absolute;
764+
bottom: $uds-component-card-checkbox-stacked-bottom;
765+
color: $white;
766+
}
767+
768+
.card-story-checkbox-stacked .card-footer {
769+
background-color: $white;
770+
}
771+
772+
/*------------------------------------------------------------------
773+
12. Checkbox Inline Cards
774+
--------------------------------------------------------------------*/
775+
776+
.card-story-checkbox-stacked .card-header .card-title:after {
777+
content: $uds-component-card-degree-title-underline-content;
778+
width: $uds-component-card-degree-title-underline-width;
779+
height: $uds-component-card-degree-title-underline-height;
780+
display: $uds-component-card-degree-title-underline-display;
781+
margin-top: $uds-component-card-degree-title-underline-margin-top;
782+
}
783+
784+
.card-story-checkbox-inline .card-header {
785+
position: relative;
786+
}
787+
788+
.card-story-checkbox-inline .card-form {
789+
position: absolute;
790+
bottom: $uds-component-card-checkbox-inline-bottom;
791+
color: $white;
792+
}
793+
794+
.card-story-checkbox-inline .card-footer {
795+
background-color: $white;
796+
}

‎packages/bootstrap4-theme/src/scss/extends/_form-fields.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,19 @@ form.uds-form {
7777
margin: $uds-size-spacing-2 0;
7878
}
7979
}
80+
81+
.card-image-fieldset {
82+
margin-bottom: $uds-size-spacing-2;
83+
84+
&.inline {
85+
display: flex;
86+
87+
.form-check:not(:first-child) {
88+
margin-left: $uds-size-spacing-4;
89+
}
90+
}
91+
}
92+
8093
.form-check {
8194
margin: 0 0 $uds-size-spacing-4 0;
8295

‎packages/bootstrap4-theme/src/scss/variables/_cards.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
$card-border-radius: 0;
2+
$uds-component-card-checkbox-stacked-bottom: 0;
3+
$uds-component-card-checkbox-inline-bottom: 0;

‎packages/bootstrap4-theme/stories/components/cards/cards.stories.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1057,3 +1057,90 @@ export const sizingUsingUtilities = () => `
10571057
</div>
10581058
</div>
10591059
`;
1060+
1061+
export const checkboxStackedCard = () => `
1062+
<div class="container">
1063+
<div class="row row-spaced pt-2 pb-2">
1064+
<div class="col col-12 col-md-6 col-lg-4">
1065+
1066+
<div class="card card-story-checkbox-stacked">
1067+
<div class="card-image-content">
1068+
<img class="card-img-top" src="${exampleImage}" alt="Card image cap">
1069+
<form class="uds-form card-form ml-4">
1070+
<fieldset class="card-image-fieldset">
1071+
<div class="form-check">
1072+
<input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
1073+
<label class="form-check-label" for="checkbox2">Option 2</label>
1074+
</div>
1075+
<div class="form-check">
1076+
<input class="form-check-input" type="checkbox" id="checkbox1" value="option1" checked>
1077+
<label class="form-check-label" for="checkbox1">Option 1</label>
1078+
</div>
1079+
</fieldset>
1080+
</form>
1081+
</div>
1082+
<div class="card-header">
1083+
<h3 class="card-title">Card default title</h3>
1084+
</div>
1085+
<div class="card-body">
1086+
<p class="card-text">Basic card with mixed content and a fixed width. Cards have no margin and no fixed width by default (they’ll naturally fill the full width of its parent), so use 'spacing utilities'.</p>
1087+
</div>
1088+
<div class="card-button">
1089+
<a href="#" class="btn btn-maroon">Default button</a>
1090+
</div>
1091+
<div class="card-link">
1092+
<a href="#" class="">Regular text link here</a>
1093+
</div>
1094+
<div class="card-tags">
1095+
<a class="btn btn-tag btn-tag-alt-white" href="#" >test tag</a> <a class="btn btn-tag btn-tag-alt-white" href="#" >test tag 2</a> <a class="btn btn-tag btn-tag-alt-white" href="#" >test tag 3</a>
1096+
</div>
1097+
</div> <!-- .card -->
1098+
1099+
</div> <!-- .col -->
1100+
</div>
1101+
</div>
1102+
`;
1103+
1104+
export const checkboxInlineCard = () => `
1105+
<div class="container">
1106+
<div class="row row-spaced pt-2 pb-2">
1107+
<div class="col col-12 col-md-6 col-lg-4">
1108+
1109+
<div class="card card-story-checkbox-inline">
1110+
<div class="card-image-content">
1111+
<img class="card-img-top" src="${exampleImage}" alt="Card image cap">
1112+
<form class="uds-form card-form ml-4">
1113+
<fieldset class="card-image-fieldset inline">
1114+
<div class="form-check">
1115+
<input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
1116+
<label class="form-check-label" for="checkbox2">Option 2</label>
1117+
</div>
1118+
<div class="form-check">
1119+
<input class="form-check-input" type="checkbox" id="checkbox1" value="option1" checked>
1120+
<label class="form-check-label" for="checkbox1">Option 1</label>
1121+
</div>
1122+
</fieldset>
1123+
</form>
1124+
</div>
1125+
<div class="card-header">
1126+
<h3 class="card-title">Card default title</h3>
1127+
</div>
1128+
<div class="card-body">
1129+
<p class="card-text">Basic card with mixed content and a fixed width. Cards have no margin and no fixed width by default (they’ll naturally fill the full width of its parent), so use 'spacing utilities'.</p>
1130+
</div>
1131+
<div class="card-button">
1132+
<a href="#" class="btn btn-maroon">Default button</a>
1133+
</div>
1134+
<div class="card-link">
1135+
<a href="#" class="">Regular text link here</a>
1136+
</div>
1137+
<div class="card-tags">
1138+
<a class="btn btn-tag btn-tag-alt-white" href="#" >test tag</a> <a class="btn btn-tag btn-tag-alt-white" href="#" >test tag 2</a> <a class="btn btn-tag btn-tag-alt-white" href="#" >test tag 3</a>
1139+
</div>
1140+
</div> <!-- .card -->
1141+
1142+
</div> <!-- .col -->
1143+
</div>
1144+
</div>
1145+
`;
1146+

0 commit comments

Comments
 (0)