Skip to content

Commit 14701dd

Browse files
mlsamuelsonmlsamuelson
authored
Merge pull request #165 from ASU/UDS-457-backgrounds-colors-and-patterns
Uds 457 backgrounds colors and patterns
2 parents dd3705d + a772058 commit 14701dd

File tree

3 files changed

+161
-0
lines changed

3 files changed

+161
-0
lines changed

‎packages/bootstrap4-theme/src/scss/bootstrap-asu-extends.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// css Bootstrap doesn't have variables for
22
@import 'extends/misc';
33
@import 'extends/alerts';
4+
@import 'extends/backgrounds';
45
@import 'extends/banners';
56
@import 'extends/buttons';
67
@import 'extends/badges';

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.background-panel {
2+
height: 322px;
3+
}
4+
5+
.gray-7-bg {
6+
background: $uds-color-base-gray-7;
7+
}
8+
9+
.gray-2-bg {
10+
background: $uds-color-base-gray-2;
11+
}
12+
13+
.gray-1-bg {
14+
background: $uds-color-base-gray-1;
15+
}
16+
17+
.white-bg {
18+
background: $uds-color-base-white;
19+
border: 1px solid $uds-color-base-gray-3;
20+
}
21+
22+
.image-bg {
23+
background: transparent linear-gradient(180deg, #19191900 0%, #191919c9 100%)
24+
0% 0% no-repeat padding-box;
25+
}
26+
27+
.section-line {
28+
border-bottom: 1px solid #707070;
29+
width: 100%;
30+
}
31+
32+
.scaling-container {
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
}
37+
38+
.content-description {
39+
padding: 16px 0;
40+
font-weight: bold;
41+
}
42+
43+
.max-size-container {
44+
max-width: 1920px;
45+
}
46+
47+
.content-description-container {
48+
background-color: $uds-color-base-gray-1;
49+
width: 100%;
50+
border: 1px solid $uds-color-base-gray-3;
51+
margin-top: 16px;
52+
}
53+
54+
.content-container {
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
justify-content: center;
59+
border: 1px dashed $uds-color-base-gray-5;
60+
height: 251px;
61+
margin: 20px 0 100px 0;
62+
font-size: 50px;
63+
color: $uds-color-base-gray-3;
64+
}

‎packages/bootstrap4-theme/stories/design/backgrounds/backgrounds.stories.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
export default { title: 'Design/Backgrounds' };
2+
3+
4+
export const approvedBackgroundColors = () => `
5+
<div class="container-fluid mt-2">
6+
<div class="row">
7+
<div class="col-12 pb-3">
8+
<h3><span class="highlight-black">Approved Background Colors</span></h3>
9+
</div>
10+
11+
<div class="col-sm-6">
12+
<div class="background-panel gray-7-bg m-3"></div>
13+
</div>
14+
<div class="col-sm-6">
15+
<div class="background-panel gray-2-bg m-3"></div>
16+
</div>
17+
18+
<div class="col-sm-6">
19+
<div class="background-panel gray-1-bg m-3"></div>
20+
</div>
21+
<div class="col-sm-6">
22+
<div class="background-panel white-bg m-3"></div>
23+
</div>
24+
</div>
25+
</div>
26+
`;
27+
28+
export const approvedBackgroundPatterns = () => `
29+
<div class="container-fluid mt-2">
30+
<div class="row">
31+
<div class="col-12 pb-3">
32+
<h3><span class="highlight-black">Approved Background Patterns</span></h3>
33+
</div>
34+
35+
<div class="col-12 pb-3">
36+
<h3>Learn to thrive morse code</h3>
37+
</div>
38+
<div class="col-sm-6">
39+
<div class="background-panel bg morse-code-white m-3"></div>
40+
</div>
41+
<div class="col-sm-6">
42+
<div class="background-panel bg morse-code-black m-3"></div>
43+
</div>
44+
45+
<div class="col-12 pb-3">
46+
<h3>Network</h3>
47+
</div>
48+
<div class="col-sm-6">
49+
<div class="background-panel bg network-white m-3"></div>
50+
</div>
51+
<div class="col-sm-6">
52+
<div class="background-panel bg network-black m-3"></div>
53+
</div>
54+
55+
<div class="col-12 pb-3">
56+
<h3>A Mountain topographical map</h3>
57+
</div>
58+
<div class="col-sm-6">
59+
<div class="background-panel bg topo-white m-3"></div>
60+
</div>
61+
<div class="col-sm-6">
62+
<div class="background-panel bg topo-black m-3"></div>
63+
</div>
64+
</div>
65+
</div>
66+
`;
67+
68+
export const imageBackgrounds = () => `
69+
<div class="container-fluid mt-2">
70+
<div class="row">
71+
<div class="col-12 pb-3">
72+
<h3><span class="highlight-black">Image Backgrounds</span></h3>
73+
</div>
74+
75+
<div class="col-sm-6">
76+
<div class="background-panel image-bg m-3"></div>
77+
</div>
78+
</div>
79+
</div>
80+
`;
81+
82+
export const backgroundsScaling = () => `
83+
<div class="jumbotron-fluid max-size-container scaling-container">
84+
<span class="content-description">1920px max width</span>
85+
<div class="section-line"></div>
86+
<div class="content-description-container scaling-container">
87+
<div class="container scaling-container">
88+
<span class="content-description">1200px margin width</span>
89+
<div class="section-line"></div>
90+
<div class="container content-container">
91+
Section Content
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
`;

0 commit comments

Comments
 (0)