Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: scss/_grid.scss

Issue 29361708: Issue 4609 - Default grid component (Closed)
Patch Set: Added automatic anchors on hover Created Nov. 3, 2016, 5:56 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « html/grid.html ('k') | scss/main.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /*!
2 * This file is part of universal-design-language
3 * Copyright (C) 2016 Eyeo GmbH
4 *
5 * universal-design-language is free software: you can redistribute it and/or
6 * modify it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * universal-design-language is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
17 */
18
19 .container,
20 .container-fluid
21 {
22 margin: 0 auto;
23 padding: 0 $small-space;
24 max-width: 100%;
25 }
26
27 .container:after,
28 .container-fluid:after,
29 .row:after
30 {
31 content: "";
32 display: table;
33 clear: both;
34 }
35
36 .row
37 {
38 margin: 0 -$small-space;
39 }
40
41 .column
42 {
43 position: relative;
44 min-height: 1px;
45 padding: 0 $small-space;
46 width: 100%;
47 }
48
49 [dir="ltr"] .column
50 {
51 float: left;
52 }
53
54 [dir="rtl"] .column
55 {
56 float: right;
57 }
58
59 @media (min-width: $mobile-breakpoint)
60 {
61 .container
62 {
63 width: 540px;
64 }
65 }
66
67 @media(min-width: $tablet-breakpoint)
68 {
69 .container
70 {
71 width: 720px;
72 }
73
74 .one-half
75 {
76 width: 50%;
77 }
78
79 [dir="ltr"] .pull-one-half
80 {
81 right: 50%;
82 }
83
84 [dir="rtl"] .pull-one-half
85 {
86 left: 50%;
87 }
88
89 [dir="ltr"] .push-one-half
90 {
91 left: 50%;
92 }
93
94 [dir="rtl"] .push-one-half
95 {
96 right: 50%;
97 }
98 }
99
100 @media(min-width: $desktop-breakpoint)
101 {
102 .container
103 {
104 width: 960px;
105 }
106
107 .one-fourth
108 {
109 width: 25%;
110 }
111
112 [dir="ltr"] .pull-one-fourth
113 {
114 right: 25%;
115 }
116
117 [dir="rtl"] .pull-one-fourth
118 {
119 left: 25%;
120 }
121
122 [dir="ltr"] .push-one-fourth
123 {
124 left: 25%;
125 }
126
127 [dir="ltr"] .push-one-fourth
128 {
129 right: 25%;
130 }
131
132 .one-third
133 {
134 width: 33.333333%;
135 }
136
137 [dir="ltr"] .pull-one-third
138 {
139 right: 33.333333%;
140 }
141
142 [dir="rtl"] .pull-one-third
143 {
144 left: 33.333333%;
145 }
146
147 [dir="ltr"] .push-one-third
148 {
149 left: 33.333333%;
150 }
151
152 [dir="rtl"] .push-one-third
153 {
154 right: 33.333333%;
155 }
156
157 .two-thirds
158 {
159 width: 66.666667%;
160 }
161
162 [dir="ltr"] .pull-one-third
163 {
164 right: 66.666667%;
165 }
166
167 [dir="rtl"] .pull-one-third
168 {
169 left: 66.666667%;
170 }
171
172 [dir="ltr"] .push-one-third
173 {
174 left: 66.666667%;
175 }
176
177 [dir="rtl"] .push-one-third
178 {
179 right: 66.666667%;
180 }
181
182 .three-fourths
183 {
184 width: 75%;
185 }
186
187 [dir="ltr"] .pull-three-fourths
188 {
189 right: 75%;
190 }
191
192 [dir="rtl"] .pull-three-fourths
193 {
194 left: 75%;
195 }
196
197 [dir="ltr"] .push-three-fourths
198 {
199 left: 75%;
200 }
201
202 [dir="rtl"] .push-three-fourths
203 {
204 right: 75%;
205 }
206
207 }
OLDNEW
« no previous file with comments | « html/grid.html ('k') | scss/main.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld