Github/movies-for-hackers
1
0
Fork 0
mirror of https://github.com/k4m4/movies-for-hackers.git synced 2024-11-23 14:34:55 +00:00
Code Issues Releases Wiki Activity

Stylz

Browse Source
This commit is contained in:
MichaelCook 2017-02-24 17:20:52 +00:00
parent da850e6154
commit 543970a313
2 changed files with 45 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/app.css vendored
View File

@ -1 +1 @@
.container-fluid{max-width:1440px}h2{font-size:20px}th{text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px 6px} body{font-size:calc(10px + .5vw)}.container-fluid{max-width:1440px}h2{font-size:20px}th{position:relative;text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px}

45
src/scss/app.scss
View File

@ -1,3 +1,6 @@
body {
font-size: calc(10px + .5vw);
}
.container-fluid { .container-fluid {
max-width: 1440px; max-width: 1440px;
} }
@ -5,6 +8,7 @@ h2 {
font-size: 20px; font-size: 20px;
} }
th { th {
position: relative;
text-transform: capitalize; text-transform: capitalize;
background: #eef7fd; background: #eef7fd;
} }
@ -12,7 +16,22 @@ th {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 2px; border-radius: 2px;
margin: 0; margin: 0;
&,
& table {
// We can't do this because, unbelievably, the <th> elements are in a separate table :(
//table-layout: auto;
}
table {
td,
th {
// Override some bananas styles
// Why did they think nowrap was a smart idea? Fuck mobiles, right?
white-space: normal;
word-break: break-word;
}
}
} }
// Realistically, this would bring in bootstrap as a package and use it properly
.table { .table {
// Cells // Cells
> thead, > thead,
@ -21,8 +40,32 @@ th {
> tr { > tr {
> th, > th,
> td { > td {
padding: 1px 6px; padding: 1px calc(0px + 1vw);
}
> th {
padding-right: 20px;
} }
} }
} }
} }
// Quick solution to the forced table-layout: fixed
th,
td {
&:nth-child(1) {
width: 50%;
}
&:nth-child(2) {
width: 22%;
}
&:nth-child(3) {
width: 14%;
}
&:nth-child(4) {
width: 14%;
}
}
.order {
position: absolute;
top: 1px;
right: 3px;
}