root / drupal7 / sites / all / themes / zen / STARTERKIT / css / layouts / responsive-rtl.css @ 87dbc3bf
1 | 87dbc3bf | Benjamin Luce | /**
|
---|---|---|---|
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 | } |