Mercurial > hg > mpiwgzen_wide
view css/layouts/responsive-rtl.css @ 0:a3750d724105 default tip
initital
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 02 Jun 2015 09:16:36 +0200 |
parents | |
children |
line wrap: on
line source
/** * @file * RTL companion for the layout-responsive.css file. */ /** * Use 3 grid columns for smaller screens. */ @media all and (min-width: 480px) and (max-width: 959px) { /** * The layout when there is only one sidebar, the right one. */ /* Span 2 columns, starting in 2nd column from right. */ .sidebar-first #content { float: right; width: 66.66667%; margin-right: 33.33333%; margin-left: -100%; } /* Span 1 column, starting in 1st column from right. */ .sidebar-first .region-sidebar-first { float: right; width: 33.33333%; margin-right: 0%; margin-left: -33.33333%; } /** * The layout when there is only one sidebar, the left one. */ /* Span 2 columns, starting in 1st column from right. */ .sidebar-second #content { float: right; width: 66.66667%; margin-right: 0%; margin-left: -66.66667%; } /* Span 1 column, starting in 3rd column from right. */ .sidebar-second .region-sidebar-second { float: right; width: 33.33333%; margin-right: 66.66667%; margin-left: -100%; } /** * The layout when there are two sidebars. */ /* Span 2 columns, starting in 2nd column from right. */ .two-sidebars #content { float: right; width: 66.66667%; margin-right: 33.33333%; margin-left: -100%; } /* Span 1 column, starting in 1st column from right. */ .two-sidebars .region-sidebar-first { float: right; width: 33.33333%; margin-right: 0%; margin-left: -33.33333%; } /* Start a new row and span all 3 columns. */ .two-sidebars .region-sidebar-second { float: right; width: 100%; margin-right: 0%; margin-left: -100%; padding-left: 0; padding-right: 0; clear: right; } /* Apply the shared properties of grid items in a single, efficient ruleset. */ .two-sidebars .region-sidebar-second .block { padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; *behavior: url("/path/to/boxsizing.htc"); _display: inline; _overflow: hidden; _overflow-y: visible; } /* Span 1 column, starting in the 1st column from right. */ .two-sidebars .region-sidebar-second .block:nth-child(3n+1) { float: right; width: 33.33333%; margin-right: 0%; margin-left: -33.33333%; clear: right; } /* Span 1 column, starting in the 2nd column from right. */ .two-sidebars .region-sidebar-second .block:nth-child(3n+2) { float: right; width: 33.33333%; margin-right: 33.33333%; margin-left: -66.66667%; } /* Span 1 column, starting in the 3rd column from right. */ .two-sidebars .region-sidebar-second .block:nth-child(3n) { float: right; width: 33.33333%; margin-right: 66.66667%; margin-left: -100%; } } /** * Use 5 grid columns for larger screens. */ @media all and (min-width: 960px) { /** * The layout when there is only one sidebar, the right one. */ /* Span 4 columns, starting in 2nd column from right. */ .sidebar-first #content { float: right; width: 80%; margin-right: 20%; margin-left: -100%; } /* Span 1 column, starting in 1st column from right. */ .sidebar-first .region-sidebar-first { float: right; width: 20%; margin-right: 0%; margin-left: -20%; } /** * The layout when there is only one sidebar, the left one. */ /* Span 4 columns, starting in 1st column from right. */ .sidebar-second #content { float: right; width: 80%; margin-right: 0%; margin-left: -80%; } /* Span 1 column, starting in 5th column from right. */ .sidebar-second .region-sidebar-second { float: right; width: 20%; margin-right: 80%; margin-left: -100%; } /** * The layout when there are two sidebars. */ /* Span 3 columns, starting in 2nd column from right. */ .two-sidebars #content { float: right; width: 60%; margin-right: 20%; margin-left: -80%; } /* Span 1 column, starting in 1st column from right. */ .two-sidebars .region-sidebar-first { float: right; width: 20%; margin-right: 0%; margin-left: -20%; } /* Span 1 column, starting in 5th column from right. */ .two-sidebars .region-sidebar-second { float: right; width: 20%; margin-right: 80%; margin-left: -100%; } }