library-mirrors/milligram
1
0
Fork 0
mirror of https://github.com/milligram/milligram.git synced 2024-11-13 16:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add new class for 100% width on mobile #204

Browse Source
This commit is contained in:
Leticia Wanderley 2018-10-23 15:57:45 -06:00
parent 0658e4282e
commit d84ebf5c6d
6 changed files with 67 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
dist/milligram.css vendored
View File

@ -454,6 +454,13 @@ input[type='radio'] {
}
}
@media (max-width: 40rem) {
.row .column.column-mobile-100 {
max-width: 100%;
width: 100%;
}
}
a {
color: #9b4dca;
text-decoration: none;
@ -541,6 +548,52 @@ th:last-child {
padding-right: 0;
}
@media screen and (max-width: 40rem) {
table {
border-spacing: 0;
display: flex;
width: 100%;
}
table thead {
border-right: solid 0.1rem #e1e1e1;
}
table thead td,
table thead th {
padding-left: 0;
}
table thead td:first-child,
table thead th:first-child {
padding-left: 0;
}
table thead td:last-child,
table thead th:last-child {
padding-right: 1.2rem;
}
table tbody {
display: flex;
overflow-x: auto;
white-space: nowrap;
}
table tbody tr {
border-right: solid 0.1rem #e1e1e1;
}
table tbody tr:last-child {
border-right: none;
}
table td,
table th {
display: block;
}
table td:first-child,
table th:first-child {
padding-left: 1.2rem;
}
table td:last-child,
table th:last-child {
padding-right: 1.2rem;
}
}
b,
strong {
font-weight: bold;

2
dist/milligram.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

8
src/_Grid.sass
View File

@ -156,3 +156,11 @@
.column
margin-bottom: inherit
padding: 0 1.0rem
// Mobile screen
@media (max-width: 40.0rem)
.row
.column
&.column-mobile-100
max-width: 100%
width: 100%

3
test/index.html
View File

@ -545,6 +545,9 @@
<div class="row">
<div class="column column-75 column-offset-25"><span class="column-demo">75%</span></div>
</div>
<div class="row">
<div class="column column-50 column-mobile-100"><span class="column-demo">50% desktop | 100% mobile</span></div>
</div>
</div>
</section>