root / drupal7 / sites / all / themes / zen / STARTERKIT / css / layouts / responsive-rtl.css @ 2c8c2b87
1 |
/**
|
---|---|
2 |
* @file
|
3 |
* RTL companion for the layout-responsive.css file.
|
4 |
*/
|
5 |
|
6 |
/**
|
7 |
* Use 3 grid columns for smaller screens.
|
8 |
*/
|
9 |
@media all and (min-width: 480px) and (max-width: 959px) { |
10 |
|
11 |
/**
|
12 |
* The layout when there is only one sidebar, the right one.
|
13 |
*/
|
14 |
|
15 |
/* Span 2 columns, starting in 2nd column from right. */
|
16 |
.sidebar-first #content { |
17 |
float: right; |
18 |
width: 66.66667%; |
19 |
margin-right: 33.33333%; |
20 |
margin-left: -100%; |
21 |
} |
22 |
|
23 |
/* Span 1 column, starting in 1st column from right. */
|
24 |
.sidebar-first .region-sidebar-first { |
25 |
float: right; |
26 |
width: 33.33333%; |
27 |
margin-right: 0%; |
28 |
margin-left: -33.33333%; |
29 |
} |
30 |
|
31 |
/**
|
32 |
* The layout when there is only one sidebar, the left one.
|
33 |
*/
|
34 |
|
35 |
/* Span 2 columns, starting in 1st column from right. */
|
36 |
.sidebar-second #content { |
37 |
float: right; |
38 |
width: 66.66667%; |
39 |
margin-right: 0%; |
40 |
margin-left: -66.66667%; |
41 |
} |
42 |
|
43 |
/* Span 1 column, starting in 3rd column from right. */
|
44 |
.sidebar-second .region-sidebar-second { |
45 |
float: right; |
46 |
width: 33.33333%; |
47 |
margin-right: 66.66667%; |
48 |
margin-left: -100%; |
49 |
} |
50 |
|
51 |
/**
|
52 |
* The layout when there are two sidebars.
|
53 |
*/
|
54 |
|
55 |
/* Span 2 columns, starting in 2nd column from right. */
|
56 |
.two-sidebars #content { |
57 |
float: right; |
58 |
width: 66.66667%; |
59 |
margin-right: 33.33333%; |
60 |
margin-left: -100%; |
61 |
} |
62 |
|
63 |
/* Span 1 column, starting in 1st column from right. */
|
64 |
.two-sidebars .region-sidebar-first { |
65 |
float: right; |
66 |
width: 33.33333%; |
67 |
margin-right: 0%; |
68 |
margin-left: -33.33333%; |
69 |
} |
70 |
|
71 |
/* Start a new row and span all 3 columns. */
|
72 |
.two-sidebars .region-sidebar-second { |
73 |
float: right; |
74 |
width: 100%; |
75 |
margin-right: 0%; |
76 |
margin-left: -100%; |
77 |
padding-left: 0; |
78 |
padding-right: 0; |
79 |
clear: right; |
80 |
} |
81 |
|
82 |
/* Apply the shared properties of grid items in a single, efficient ruleset. */
|
83 |
.two-sidebars .region-sidebar-second .block { |
84 |
padding-left: 10px; |
85 |
padding-right: 10px; |
86 |
-moz-box-sizing: border-box; |
87 |
-webkit-box-sizing: border-box; |
88 |
-ms-box-sizing: border-box; |
89 |
box-sizing: border-box; |
90 |
word-wrap: break-word; |
91 |
*behavior: url("/path/to/boxsizing.htc"); |
92 |
_display: inline; |
93 |
_overflow: hidden; |
94 |
_overflow-y: visible; |
95 |
} |
96 |
|
97 |
/* Span 1 column, starting in the 1st column from right. */
|
98 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) { |
99 |
float: right; |
100 |
width: 33.33333%; |
101 |
margin-right: 0%; |
102 |
margin-left: -33.33333%; |
103 |
clear: right; |
104 |
} |
105 |
|
106 |
/* Span 1 column, starting in the 2nd column from right. */
|
107 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) { |
108 |
float: right; |
109 |
width: 33.33333%; |
110 |
margin-right: 33.33333%; |
111 |
margin-left: -66.66667%; |
112 |
} |
113 |
|
114 |
/* Span 1 column, starting in the 3rd column from right. */
|
115 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) { |
116 |
float: right; |
117 |
width: 33.33333%; |
118 |
margin-right: 66.66667%; |
119 |
margin-left: -100%; |
120 |
} |
121 |
} |
122 |
|
123 |
/**
|
124 |
* Use 5 grid columns for larger screens.
|
125 |
*/
|
126 |
@media all and (min-width: 960px) { |
127 |
|
128 |
/**
|
129 |
* The layout when there is only one sidebar, the right one.
|
130 |
*/
|
131 |
|
132 |
/* Span 4 columns, starting in 2nd column from right. */
|
133 |
.sidebar-first #content { |
134 |
float: right; |
135 |
width: 80%; |
136 |
margin-right: 20%; |
137 |
margin-left: -100%; |
138 |
} |
139 |
|
140 |
/* Span 1 column, starting in 1st column from right. */
|
141 |
.sidebar-first .region-sidebar-first { |
142 |
float: right; |
143 |
width: 20%; |
144 |
margin-right: 0%; |
145 |
margin-left: -20%; |
146 |
} |
147 |
|
148 |
/**
|
149 |
* The layout when there is only one sidebar, the left one.
|
150 |
*/
|
151 |
|
152 |
/* Span 4 columns, starting in 1st column from right. */
|
153 |
.sidebar-second #content { |
154 |
float: right; |
155 |
width: 80%; |
156 |
margin-right: 0%; |
157 |
margin-left: -80%; |
158 |
} |
159 |
|
160 |
/* Span 1 column, starting in 5th column from right. */
|
161 |
.sidebar-second .region-sidebar-second { |
162 |
float: right; |
163 |
width: 20%; |
164 |
margin-right: 80%; |
165 |
margin-left: -100%; |
166 |
} |
167 |
|
168 |
/**
|
169 |
* The layout when there are two sidebars.
|
170 |
*/
|
171 |
|
172 |
/* Span 3 columns, starting in 2nd column from right. */
|
173 |
.two-sidebars #content { |
174 |
float: right; |
175 |
width: 60%; |
176 |
margin-right: 20%; |
177 |
margin-left: -80%; |
178 |
} |
179 |
|
180 |
/* Span 1 column, starting in 1st column from right. */
|
181 |
.two-sidebars .region-sidebar-first { |
182 |
float: right; |
183 |
width: 20%; |
184 |
margin-right: 0%; |
185 |
margin-left: -20%; |
186 |
} |
187 |
|
188 |
/* Span 1 column, starting in 5th column from right. */
|
189 |
.two-sidebars .region-sidebar-second { |
190 |
float: right; |
191 |
width: 20%; |
192 |
margin-right: 80%; |
193 |
margin-left: -100%; |
194 |
} |
195 |
} |