Unified Diff: demo/css/demo.css
Issue 29361708:
Issue 4609 - Default grid component (Closed)
Patch Set: Updated name, inverse class, and documentation
Created Dec. 1, 2016, 6:45 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
demo/grid.html » ('j')
|
demo/grid.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: demo/css/demo.css |
| =================================================================== |
| --- a/demo/css/demo.css |
| +++ b/demo/css/demo.css |
| @@ -17,8 +17,57 @@ |
| */ |
| /* The following styles are for demonstration purposes **only** */ |
| body |
| { |
| margin: 3em 0; |
| } |
| + |
| +/** |
| + * Highlight text with inverse colors and padding |
| + */ |
| +.inverse-text |
| +{ |
| + padding: 0.5em 1em; |
| + color: #fff; |
| + background-color: #000; |
| +} |
| + |
| +/** |
| + * Tablet width container |
| + */ |
| +.tablet |
| +{ |
| + width: 720px; |
| +} |
| + |
| +/** |
| + * Mobile width container |
| + */ |
| +.mobile |
| +{ |
| + width: 540px; |
| +} |
| + |
| +/* Collapse mobile & tablet container widths to 100% on small screens */ |
| + |
| +.mobile, |
| +.tablet |
| +{ |
| + max-width: 100%; |
| +} |
| + |
| +.mobile .column, |
| +.tablet .column |
| +{ |
| + width: 100%; |
| +} |
| + |
| +@media(min-width: 768px) |
| +{ |
| + /* Collapse one fourth columns to one half columns inside tablet containers */ |
| + .tablet .column.one-fourth |
| + { |
| + width: 50%; |
| + } |
| +} |
« no previous file with comments
|
« no previous file
|
demo/grid.html » ('j')
|
demo/grid.html » ('J')
