Revision ca55d066
Added by Andreas Kohlbecker over 11 years ago
| 7.x/themes/zen_dataportal/css/layouts/responsive-sidebars-rtl.css | ||
|---|---|---|
| 2 | 2 |
* @file |
| 3 | 3 |
* RTL companion for the responsive-sidebars.css file. |
| 4 | 4 |
*/ |
| 5 |
/** |
|
| 6 |
* @file |
|
| 7 |
* Positioning for responsive layout . |
|
| 8 |
* |
|
| 9 |
* Define CSS classes to create a table-free, 3-column, 2-column, or single |
|
| 10 |
* column layout depending on whether blocks are enabled in the left or right |
|
| 11 |
* columns. |
|
| 12 |
* |
|
| 13 |
* This layout uses the Zen Grids plugin for Compass: http://zengrids.com |
|
| 14 |
*/ |
|
| 15 |
/* |
|
| 16 |
* Center the page. |
|
| 17 |
*/ |
|
| 18 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000344}}
|
|
| 19 |
#page, |
|
| 20 |
.region-bottom {
|
|
| 21 |
/* For screen sizes larger than 1200px, prevent excessively long lines of text |
|
| 22 |
by setting a max-width. */ |
|
| 23 |
margin-left: auto; |
|
| 24 |
margin-right: auto; |
|
| 25 |
max-width: 960px; |
|
| 26 |
} |
|
| 5 | 27 |
|
| 6 | 28 |
/* |
| 7 |
* Use 3 grid columns for smaller screens.
|
|
| 29 |
* Apply the shared properties of grid items in a single, efficient ruleset.
|
|
| 8 | 30 |
*/ |
| 31 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000362}}
|
|
| 32 |
#header, |
|
| 33 |
#content, |
|
| 34 |
#navigation, |
|
| 35 |
.region-sidebar-first, |
|
| 36 |
.region-sidebar-second, |
|
| 37 |
#footer {
|
|
| 38 |
padding-left: 10px; |
|
| 39 |
padding-right: 10px; |
|
| 40 |
-moz-box-sizing: border-box; |
|
| 41 |
-webkit-box-sizing: border-box; |
|
| 42 |
-ms-box-sizing: border-box; |
|
| 43 |
box-sizing: border-box; |
|
| 44 |
word-wrap: break-word; |
|
| 45 |
} |
|
| 9 | 46 |
|
| 10 |
@media all and (min-width: 480px) and (max-width: 959px) {
|
|
| 47 |
/* |
|
| 48 |
* Containers for grid items and flow items. |
|
| 49 |
*/ |
|
| 50 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass-extensions\/zen-grids\/stylesheets\/zen\/_grids\.scss}line{font-family:\0000352}}
|
|
| 51 |
#header:before, #header:after, |
|
| 52 |
#main:before, |
|
| 53 |
#main:after, |
|
| 54 |
#footer:before, |
|
| 55 |
#footer:after {
|
|
| 56 |
content: ""; |
|
| 57 |
display: table; |
|
| 58 |
} |
|
| 59 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass-extensions\/zen-grids\/stylesheets\/zen\/_grids\.scss}line{font-family:\0000356}}
|
|
| 60 |
#header:after, |
|
| 61 |
#main:after, |
|
| 62 |
#footer:after {
|
|
| 63 |
clear: both; |
|
| 64 |
} |
|
| 11 | 65 |
|
| 66 |
/* |
|
| 67 |
* Navigation bar |
|
| 68 |
*/ |
|
| 69 |
@media all and (min-width: 480px) {
|
|
| 70 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000381}}
|
|
| 71 |
#main {
|
|
| 72 |
padding-top: 3em; |
|
| 73 |
/* Move all the children of #main down to make room. */ |
|
| 74 |
position: relative; |
|
| 75 |
} |
|
| 76 |
|
|
| 77 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000385}}
|
|
| 78 |
#navigation {
|
|
| 79 |
position: absolute; |
|
| 80 |
top: 0; |
|
| 81 |
/* Move the navbar up inside #main's padding. */ |
|
| 82 |
height: 3em; |
|
| 83 |
width: 100%; |
|
| 84 |
} |
|
| 85 |
} |
|
| 86 |
@media all and (min-width: 480px) and (max-width: 959px) {
|
|
| 87 |
/* |
|
| 88 |
* Use 3 grid columns for smaller screens. |
|
| 89 |
*/ |
|
| 12 | 90 |
/* |
| 13 | 91 |
* The layout when there is only one sidebar, the left one. |
| 14 | 92 |
*/ |
| 15 |
|
|
| 16 |
.sidebar-first #content { /* Span 2 columns, starting in 2nd column from left. */
|
|
| 93 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003104}}
|
|
| 94 |
.sidebar-first #content {
|
|
| 95 |
/* Span 2 columns, starting in 2nd column from left. */ |
|
| 17 | 96 |
float: right; |
| 18 |
width: 66.667%; |
|
| 19 |
margin-right: 33.333%; |
|
| 97 |
width: 66.66667%;
|
|
| 98 |
margin-right: 33.33333%;
|
|
| 20 | 99 |
margin-left: -100%; |
| 21 | 100 |
} |
| 22 |
.sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 101 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003108}}
|
|
| 102 |
.sidebar-first .region-sidebar-first {
|
|
| 103 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 23 | 104 |
float: right; |
| 24 |
width: 33.333%; |
|
| 105 |
width: 33.33333%;
|
|
| 25 | 106 |
margin-right: 0%; |
| 26 |
margin-left: -33.333%; |
|
| 107 |
margin-left: -33.33333%;
|
|
| 27 | 108 |
} |
| 28 | 109 |
|
| 29 | 110 |
/* |
| 30 | 111 |
* The layout when there is only one sidebar, the right one. |
| 31 | 112 |
*/ |
| 32 |
|
|
| 33 |
.sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */
|
|
| 113 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003118}}
|
|
| 114 |
.sidebar-second #content {
|
|
| 115 |
/* Span 2 columns, starting in 1st column from left. */ |
|
| 34 | 116 |
float: right; |
| 35 |
width: 66.667%; |
|
| 117 |
width: 66.66667%;
|
|
| 36 | 118 |
margin-right: 0%; |
| 37 |
margin-left: -66.667%; |
|
| 119 |
margin-left: -66.66667%;
|
|
| 38 | 120 |
} |
| 39 |
.sidebar-second .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */
|
|
| 121 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003122}}
|
|
| 122 |
.sidebar-second .region-sidebar-second {
|
|
| 123 |
/* Span 1 column, starting in 3rd column from left. */ |
|
| 40 | 124 |
float: right; |
| 41 |
width: 33.333%; |
|
| 42 |
margin-right: 66.667%; |
|
| 125 |
width: 33.33333%;
|
|
| 126 |
margin-right: 66.66667%;
|
|
| 43 | 127 |
margin-left: -100%; |
| 44 | 128 |
} |
| 45 | 129 |
|
| 46 | 130 |
/* |
| 47 | 131 |
* The layout when there are two sidebars. |
| 48 | 132 |
*/ |
| 49 |
|
|
| 50 |
.two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */
|
|
| 133 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003132}}
|
|
| 134 |
.two-sidebars #content {
|
|
| 135 |
/* Span 2 columns, starting in 2nd column from left. */ |
|
| 51 | 136 |
float: right; |
| 52 |
width: 66.667%; |
|
| 53 |
margin-right: 33.333%; |
|
| 137 |
width: 66.66667%;
|
|
| 138 |
margin-right: 33.33333%;
|
|
| 54 | 139 |
margin-left: -100%; |
| 55 | 140 |
} |
| 56 |
.two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 141 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003136}}
|
|
| 142 |
.two-sidebars .region-sidebar-first {
|
|
| 143 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 57 | 144 |
float: right; |
| 58 |
width: 33.333%; |
|
| 145 |
width: 33.33333%;
|
|
| 59 | 146 |
margin-right: 0%; |
| 60 |
margin-left: -33.333%; |
|
| 147 |
margin-left: -33.33333%;
|
|
| 61 | 148 |
} |
| 62 |
.two-sidebars .region-sidebar-second { /* Start a new row and span all 3 columns. */
|
|
| 149 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003140}}
|
|
| 150 |
.two-sidebars .region-sidebar-second {
|
|
| 151 |
/* Start a new row and span all 3 columns. */ |
|
| 63 | 152 |
float: right; |
| 64 | 153 |
width: 100%; |
| 65 | 154 |
margin-right: 0%; |
| 66 | 155 |
margin-left: -100%; |
| 67 |
*position: relative; |
|
| 68 |
*zoom: 1; |
|
| 69 | 156 |
padding-left: 0; |
| 70 | 157 |
padding-right: 0; |
| 71 | 158 |
clear: right; |
| 72 | 159 |
} |
| 73 |
.two-sidebars .region-sidebar-second:before, |
|
| 74 |
.two-sidebars .region-sidebar-second:after {
|
|
| 75 |
content: ""; |
|
| 76 |
display: table; |
|
| 77 |
} |
|
| 78 |
.two-sidebars .region-sidebar-second:after {
|
|
| 79 |
clear: both; |
|
| 80 |
} |
|
| 160 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003145}}
|
|
| 81 | 161 |
.two-sidebars .region-sidebar-second .block {
|
| 82 | 162 |
padding-left: 10px; |
| 83 | 163 |
padding-right: 10px; |
| ... | ... | |
| 86 | 166 |
-ms-box-sizing: border-box; |
| 87 | 167 |
box-sizing: border-box; |
| 88 | 168 |
word-wrap: break-word; |
| 89 |
_display: inline; |
|
| 90 |
_overflow: hidden; |
|
| 91 |
_overflow-y: visible; |
|
| 92 | 169 |
} |
| 93 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) { /* Span 1 column, starting in the 1st column from left. */
|
|
| 170 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003148}}
|
|
| 171 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
|
|
| 172 |
/* Span 1 column, starting in the 1st column from left. */ |
|
| 94 | 173 |
float: right; |
| 95 |
width: 33.333%; |
|
| 174 |
width: 33.33333%;
|
|
| 96 | 175 |
margin-right: 0%; |
| 97 |
margin-left: -33.333%; |
|
| 176 |
margin-left: -33.33333%;
|
|
| 98 | 177 |
clear: right; |
| 99 | 178 |
} |
| 100 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) { /* Span 1 column, starting in the 2nd column from left. */
|
|
| 179 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003152}}
|
|
| 180 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
|
|
| 181 |
/* Span 1 column, starting in the 2nd column from left. */ |
|
| 101 | 182 |
float: right; |
| 102 |
width: 33.333%; |
|
| 103 |
margin-right: 33.333%; |
|
| 104 |
margin-left: -66.667%; |
|
| 183 |
width: 33.33333%;
|
|
| 184 |
margin-right: 33.33333%;
|
|
| 185 |
margin-left: -66.66667%;
|
|
| 105 | 186 |
} |
| 106 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) { /* Span 1 column, starting in the 3rd column from left. */
|
|
| 187 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003155}}
|
|
| 188 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) {
|
|
| 189 |
/* Span 1 column, starting in the 3rd column from left. */ |
|
| 107 | 190 |
float: right; |
| 108 |
width: 33.333%; |
|
| 109 |
margin-right: 66.667%; |
|
| 191 |
width: 33.33333%;
|
|
| 192 |
margin-right: 66.66667%;
|
|
| 110 | 193 |
margin-left: -100%; |
| 111 | 194 |
} |
| 112 | 195 |
} |
| 113 |
|
|
| 114 |
/* |
|
| 115 |
* Use 5 grid columns for larger screens. |
|
| 116 |
*/ |
|
| 117 |
|
|
| 118 | 196 |
@media all and (min-width: 960px) {
|
| 119 |
|
|
| 197 |
/* |
|
| 198 |
* Use 5 grid columns for larger screens. |
|
| 199 |
*/ |
|
| 120 | 200 |
/* |
| 121 | 201 |
* The layout when there is only one sidebar, the left one. |
| 122 | 202 |
*/ |
| 123 |
|
|
| 124 |
.sidebar-first #content { /* Span 4 columns, starting in 2nd column from left. */
|
|
| 203 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003173}}
|
|
| 204 |
.sidebar-first #content {
|
|
| 205 |
/* Span 4 columns, starting in 2nd column from left. */ |
|
| 125 | 206 |
float: right; |
| 126 | 207 |
width: 80%; |
| 127 | 208 |
margin-right: 20%; |
| 128 | 209 |
margin-left: -100%; |
| 129 | 210 |
} |
| 130 |
.sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 211 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003177}}
|
|
| 212 |
.sidebar-first .region-sidebar-first {
|
|
| 213 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 131 | 214 |
float: right; |
| 132 | 215 |
width: 20%; |
| 133 | 216 |
margin-right: 0%; |
| ... | ... | |
| 137 | 220 |
/* |
| 138 | 221 |
* The layout when there is only one sidebar, the right one. |
| 139 | 222 |
*/ |
| 140 |
|
|
| 141 |
.sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */
|
|
| 223 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003187}}
|
|
| 224 |
.sidebar-second #content {
|
|
| 225 |
/* Span 4 columns, starting in 1st column from left. */ |
|
| 142 | 226 |
float: right; |
| 143 | 227 |
width: 80%; |
| 144 | 228 |
margin-right: 0%; |
| 145 | 229 |
margin-left: -80%; |
| 146 | 230 |
} |
| 147 |
.sidebar-second .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
|
|
| 231 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003191}}
|
|
| 232 |
.sidebar-second .region-sidebar-second {
|
|
| 233 |
/* Span 1 column, starting in 5th column from left. */ |
|
| 148 | 234 |
float: right; |
| 149 | 235 |
width: 20%; |
| 150 | 236 |
margin-right: 80%; |
| ... | ... | |
| 154 | 240 |
/* |
| 155 | 241 |
* The layout when there are two sidebars. |
| 156 | 242 |
*/ |
| 157 |
|
|
| 158 |
.two-sidebars #content { /* Span 3 columns, starting in 2nd column from left. */
|
|
| 243 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003201}}
|
|
| 244 |
.two-sidebars #content {
|
|
| 245 |
/* Span 3 columns, starting in 2nd column from left. */ |
|
| 159 | 246 |
float: right; |
| 160 | 247 |
width: 60%; |
| 161 | 248 |
margin-right: 20%; |
| 162 | 249 |
margin-left: -80%; |
| 163 | 250 |
} |
| 164 |
.two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 251 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003205}}
|
|
| 252 |
.two-sidebars .region-sidebar-first {
|
|
| 253 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 165 | 254 |
float: right; |
| 166 | 255 |
width: 20%; |
| 167 | 256 |
margin-right: 0%; |
| 168 | 257 |
margin-left: -20%; |
| 169 | 258 |
} |
| 170 |
.two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
|
|
| 259 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003209}}
|
|
| 260 |
.two-sidebars .region-sidebar-second {
|
|
| 261 |
/* Span 1 column, starting in 5th column from left. */ |
|
| 171 | 262 |
float: right; |
| 172 | 263 |
width: 20%; |
| 173 | 264 |
margin-right: 80%; |
Also available in: Unified diff
configuring theme and first sass editing