Skip to content

Commit e4946d8

Browse files
joshfishmanjoshfishman
committed
Update tables.scss, and table display on index.html
1 parent d6ce024 commit e4946d8

7 files changed

Lines changed: 448 additions & 60 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
DS_store
2+
**/.DS_Store

‎dist/css/main.css‎

Lines changed: 160 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
color: #ffffff;
2+
color: #333333;
33
font: normal 125%/1.4 "Roboto", sans-serif;
44
}
55

@@ -31,9 +31,13 @@ body {
3131
text-decoration: none;
3232
transition: all 100ms ease-in;
3333
white-space: nowrap;
34+
align-items: center;
35+
display: inline-flex;
36+
justify-content: center;
37+
margin: 5px 0;
3438
}
3539

36-
.btn--default {
40+
.btn {
3741
align-items: center;
3842
display: inline-flex;
3943
justify-content: center;
@@ -44,11 +48,19 @@ body {
4448
Button Colors
4549
---------------------------*/
4650
/* Primary Button --- Green */
47-
.btn-primary {
51+
.btn {
4852
background: #247984;
4953
color: #ffffff;
54+
border: 4px solid transparent;
55+
}
56+
.btn:focus, .btn.focus {
57+
border-color: #0D5761;
58+
outline-color: #0D5761;
59+
}
60+
.btn:disabled {
61+
background: #c6c6c6;
5062
}
51-
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
63+
.btn:hover, .btn:active, .btn.hover, .btn.active {
5264
background: #0D5761;
5365
color: #ffffff;
5466
text-decoration: none;
@@ -99,4 +111,147 @@ body {
99111
btn--page-name-button-function
100112
EXAMPLE: btn--home-getting-started
101113
- Page-specific class names should live in that specific page's .scss file.
102-
*/
114+
*/
115+
table {
116+
background-color: #ffffff;
117+
}
118+
table col[class*=col-] {
119+
position: static;
120+
display: table-column;
121+
float: none;
122+
}
123+
table td[class*=col-],
124+
table th[class*=col-] {
125+
position: static;
126+
display: table-cell;
127+
float: none;
128+
}
129+
130+
caption {
131+
padding-top: 0.5rem;
132+
padding-bottom: 0.5rem;
133+
color: #989898;
134+
text-align: left;
135+
}
136+
137+
th {
138+
text-align: left;
139+
}
140+
141+
.table {
142+
width: 100%;
143+
max-width: 100%;
144+
margin-bottom: 1.5rem;
145+
}
146+
.table > thead > tr > th,
147+
.table > thead > tr > td,
148+
.table > tbody > tr > th,
149+
.table > tbody > tr > td,
150+
.table > tfoot > tr > th,
151+
.table > tfoot > tr > td {
152+
padding: 0.5rem;
153+
line-height: 1.5;
154+
vertical-align: top;
155+
border-top: 1px solid #333333;
156+
}
157+
.table > thead > tr > th {
158+
vertical-align: bottom;
159+
border-bottom: 2px solid #333333;
160+
}
161+
.table > caption + thead > tr:first-child > th,
162+
.table > caption + thead > tr:first-child > td,
163+
.table > colgroup + thead > tr:first-child > th,
164+
.table > colgroup + thead > tr:first-child > td,
165+
.table > thead:first-child > tr:first-child > th,
166+
.table > thead:first-child > tr:first-child > td {
167+
border-top: 0;
168+
}
169+
.table > tbody + tbody {
170+
border-top: 2px solid #333333;
171+
}
172+
.table .table {
173+
background-color: #ffffff;
174+
}
175+
176+
.table-condensed > thead > tr > th,
177+
.table-condensed > thead > tr > td,
178+
.table-condensed > tbody > tr > th,
179+
.table-condensed > tbody > tr > td,
180+
.table-condensed > tfoot > tr > th,
181+
.table-condensed > tfoot > tr > td {
182+
padding: 0.25rem;
183+
}
184+
185+
.table-bordered {
186+
border: 1px solid #333333;
187+
}
188+
.table-bordered > thead > tr > th,
189+
.table-bordered > thead > tr > td,
190+
.table-bordered > tbody > tr > th,
191+
.table-bordered > tbody > tr > td,
192+
.table-bordered > tfoot > tr > th,
193+
.table-bordered > tfoot > tr > td {
194+
border: 1px solid #333333;
195+
}
196+
.table-bordered > thead > tr > th,
197+
.table-bordered > thead > tr > td {
198+
border-bottom-width: 2px;
199+
}
200+
201+
.table-striped > tbody > tr:nth-of-type(odd) {
202+
background-color: #F8F9FC;
203+
}
204+
205+
.table-hover > tbody > tr:hover {
206+
background-color: #989898;
207+
}
208+
209+
.table-responsive {
210+
min-height: 0.01%;
211+
overflow-x: auto;
212+
}
213+
@media screen and (max-width: (max-width: 767px)) {
214+
.table-responsive {
215+
width: 100%;
216+
margin-bottom: 1.125rem;
217+
overflow-y: hidden;
218+
-ms-overflow-style: -ms-autohiding-scrollbar;
219+
border: 1px solid #F8F9FC;
220+
}
221+
.table-responsive > .table {
222+
margin-bottom: 0;
223+
}
224+
.table-responsive > .table > thead > tr > th,
225+
.table-responsive > .table > thead > tr > td,
226+
.table-responsive > .table > tbody > tr > th,
227+
.table-responsive > .table > tbody > tr > td,
228+
.table-responsive > .table > tfoot > tr > th,
229+
.table-responsive > .table > tfoot > tr > td {
230+
white-space: nowrap;
231+
}
232+
.table-responsive > .table-bordered {
233+
border: 0;
234+
}
235+
.table-responsive > .table-bordered > thead > tr > th:first-child,
236+
.table-responsive > .table-bordered > thead > tr > td:first-child,
237+
.table-responsive > .table-bordered > tbody > tr > th:first-child,
238+
.table-responsive > .table-bordered > tbody > tr > td:first-child,
239+
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
240+
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
241+
border-left: 0;
242+
}
243+
.table-responsive > .table-bordered > thead > tr > th:last-child,
244+
.table-responsive > .table-bordered > thead > tr > td:last-child,
245+
.table-responsive > .table-bordered > tbody > tr > th:last-child,
246+
.table-responsive > .table-bordered > tbody > tr > td:last-child,
247+
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
248+
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
249+
border-right: 0;
250+
}
251+
.table-responsive > .table-bordered > tbody > tr:last-child > th,
252+
.table-responsive > .table-bordered > tbody > tr:last-child > td,
253+
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
254+
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
255+
border-bottom: 0;
256+
}
257+
}/*# sourceMappingURL=main.css.map */

‎dist/css/main.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,44 @@
88
<title>Internship Component Samples</title>
99
</head>
1010
<body>
11-
<div class="buttons">
12-
<button class="btn btn-default btn-primary btn-sm">Button</button>
13-
<button class="btn btn-default btn-primary btn-md">Button</button>
14-
<button class="btn btn-default btn-primary btn-lg">Button</button>
11+
<div class="table-responsive">
12+
<table class="table">
13+
<thead>
14+
<tr>
15+
<th colspan="3"><h2>Buttons</h2></th>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<tr>
20+
<td>
21+
<h3>Small</h3>
22+
<button class="btn btn-sm">Button</button>
23+
</td>
24+
<td>
25+
<h3>Medium</h3>
26+
<button class="btn btn-md">Button</button>
27+
</td>
28+
<td>
29+
<h3>Large</h3>
30+
<button class="btn btn-lg">Button</button>
31+
</td>
32+
</tr>
33+
<tr>
34+
<td>
35+
<h4>Hover / Active</h4>
36+
<button class="btn btn-sm active">Button</button></td>
37+
</tr>
38+
<tr>
39+
<td>
40+
<h4>Focus</h4>
41+
<button class="btn btn-sm focus">Button</button></td>
42+
</tr>
43+
<tr>
44+
<td><h4>Disabled</h4>
45+
<button disabled class="btn btn-sm">Button</button></td>
46+
</tr>
47+
</tbody>
48+
</table>
1549
</div>
1650
</body>
1751
</html>

‎sass/abstracts/_variables.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
/// Colors
66
$color-white: #ffffff;
7+
$color-light-grey:#F8F9FC;
8+
$color-dark-grey: #989898;
79
$color-black: #333333;
810
$color-green: #247984;
911
$color-darkgreen: #0D5761;
@@ -13,12 +15,24 @@ $text-font-stack: (
1315
sans-serif
1416
);
1517
$text-color: $color-black;
18+
$text-muted: $color-dark-grey;
1619

1720

1821
$button-text-color: $color-white;
1922
$button-defaultcolor: $color-green;
2023
$button-hovercolor: $color-darkgreen;
2124

25+
$table-bg: $color-white;
26+
$table-bg-accent: $color-light-grey;
27+
$table-bg-hover: $color-dark-grey;
28+
$table-cell-padding: 0.5rem;
29+
$table-condensed-cell-padding: 0.25rem;
30+
$line-height-base: 1.5;
31+
$line-height-computed: 1.5rem;
32+
$table-border-color: $color-black;
33+
$body-bg: $color-white;
34+
35+
2236
/// Breakpoints map
2337
/// @prop {String} keys - Keys are identifiers mapped to a given length
2438
/// @prop {Map} values - Values are actual breakpoints expressed in pixels

‎sass/components/_buttons.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
margin: 5px 0;
2828
}
2929

30-
.btn--default {
30+
.btn {
3131
align-items: center;
3232
display: inline-flex;
3333
justify-content: center;

0 commit comments

Comments
 (0)