| OLD | NEW |
| (Empty) |
| 1 /* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ | |
| 2 /* for details. All rights reserved. Use of this source code is governed by a */ | |
| 3 /* BSD-style license that can be found in the LICENSE file. */ | |
| 4 | |
| 5 @stylet AdaptiveLayout { | |
| 6 #grid { | |
| 7 display: -dart-grid; | |
| 8 grid-columns: auto minmax(min-content, 1fr); | |
| 9 grid-rows: auto minmax(min-content, 1fr) auto; | |
| 10 } | |
| 11 #title { | |
| 12 grid-column: 1; | |
| 13 grid-row: 1; | |
| 14 } | |
| 15 #score { | |
| 16 grid-column: 1; | |
| 17 grid-row: 3; | |
| 18 } | |
| 19 #stats { | |
| 20 grid-column: 1; | |
| 21 grid-row: 2; | |
| 22 grid-row-align: start; | |
| 23 } | |
| 24 #board { | |
| 25 grid-column: 2; | |
| 26 grid-row: 1; | |
| 27 grid-row-span: 2; | |
| 28 } | |
| 29 #controls { | |
| 30 grid-column: 2; | |
| 31 grid-row: 3; | |
| 32 grid-column-align: center; | |
| 33 } | |
| 34 } | |
| 35 | |
| 36 @stylet SourceIndependencePortrait { | |
| 37 #grid { | |
| 38 display: -dart-grid; | |
| 39 grid-template: "ta" | |
| 40 "sa" | |
| 41 "bb" | |
| 42 "cc"; | |
| 43 grid-columns: auto minmax(min-content, 1fr); | |
| 44 grid-rows: auto auto minmax(min-content, 1fr) auto; | |
| 45 } | |
| 46 #title { | |
| 47 grid-cell: "t"; | |
| 48 } | |
| 49 #score { | |
| 50 grid-cell: "s"; | |
| 51 } | |
| 52 #stats { | |
| 53 grid-cell: "a"; | |
| 54 } | |
| 55 #board { | |
| 56 grid-cell: "b"; | |
| 57 } | |
| 58 #controls { | |
| 59 grid-cell: "c"; | |
| 60 } | |
| 61 } | |
| 62 | |
| 63 @stylet SourceIndependenceLandscape { | |
| 64 #grid { | |
| 65 display: -dart-grid; | |
| 66 grid-template: "tb" | |
| 67 "ab" | |
| 68 "sc"; | |
| 69 grid-columns: auto minmax(min-content, 1fr); | |
| 70 grid-rows: auto minmax(min-content, 1fr) auto; | |
| 71 } | |
| 72 #title { | |
| 73 grid-cell: "t"; | |
| 74 } | |
| 75 #score { | |
| 76 grid-cell: "s"; | |
| 77 } | |
| 78 #stats { | |
| 79 grid-cell: "a"; | |
| 80 } | |
| 81 #board { | |
| 82 grid-cell: "b"; | |
| 83 } | |
| 84 #controls { | |
| 85 grid-cell: "c"; | |
| 86 } | |
| 87 } | |
| 88 | |
| 89 @stylet GridLayering { | |
| 90 #grid { | |
| 91 display: -dart-grid; | |
| 92 grid-columns: "start" auto | |
| 93 "track-start" 0.5fr | |
| 94 "thumb-start" auto | |
| 95 "fill-split" auto | |
| 96 "thumb-end" 0.5fr | |
| 97 "track-end" auto | |
| 98 "end"; | |
| 99 } | |
| 100 #lower-label { | |
| 101 grid-column: "start"; | |
| 102 } | |
| 103 #track { | |
| 104 grid-column: "track-start" "track-end"; | |
| 105 grid-row-align: center; | |
| 106 } | |
| 107 #upper-label { | |
| 108 grid-column: "track-end"; | |
| 109 } | |
| 110 #lower-fill { | |
| 111 grid-column: "track-start" "fill-split"; | |
| 112 grid-row-align: center; grid-layer: 5; | |
| 113 } | |
| 114 #upper-fill { | |
| 115 grid-column: "fill-split" "track-end"; | |
| 116 grid-row-align: center; | |
| 117 grid-layer: 5; | |
| 118 } | |
| 119 #thumb { | |
| 120 grid-column: "thumb-start" "thumb-end"; | |
| 121 grid-layer: 10; | |
| 122 } | |
| 123 } | |
| 124 | |
| 125 @stylet GridLines_5 { | |
| 126 #grid { | |
| 127 display: -dart-grid; | |
| 128 grid-columns: 150px 1fr; | |
| 129 grid-rows: 50px 1fr 50px; | |
| 130 } | |
| 131 #item1 { | |
| 132 grid-column: 2; | |
| 133 grid-row: 1 4; | |
| 134 } | |
| 135 } | |
| 136 | |
| 137 @stylet GridLines_6 { | |
| 138 #grid { | |
| 139 display: -dart-grid; | |
| 140 grid-columns: 150px "item1-start" 1fr "item1-end"; | |
| 141 grid-rows: "item1-start" 50px 1fr 50px "item1-end"; | |
| 142 } | |
| 143 | |
| 144 #item1 { | |
| 145 grid-column: "item1-start" "item1-end"; | |
| 146 grid-row: "item1-start" "item1-end"; | |
| 147 } | |
| 148 } | |
| 149 | |
| 150 @stylet GridCells { | |
| 151 #grid { | |
| 152 display: -dart-grid; | |
| 153 grid-template: "ad" | |
| 154 "bd" | |
| 155 "cd"; | |
| 156 grid-columns: 150px 1fr; | |
| 157 grid-rows: 50px 1fr 50px; | |
| 158 } | |
| 159 #item2 { | |
| 160 grid-cell: "b"; | |
| 161 grid-row-align: start; | |
| 162 } | |
| 163 #item3 { | |
| 164 grid-cell: "b"; | |
| 165 grid-column-align: end; | |
| 166 grid-row-align: end; | |
| 167 } | |
| 168 } | |
| 169 | |
| 170 @stylet StartEndingGridlines11a { | |
| 171 #grid { | |
| 172 display: -dart-grid; | |
| 173 grid-columns: 50px 1fr; | |
| 174 grid-rows: "first" 250px 1fr 250px "last"; | |
| 175 } | |
| 176 #item { | |
| 177 grid-column:1 3; | |
| 178 grid-row: "first" "last"; | |
| 179 } | |
| 180 } | |
| 181 | |
| 182 @stylet StartEndingGridlines11b { | |
| 183 #grid { | |
| 184 display: -dart-grid; | |
| 185 grid-columns: 50px 1fr; | |
| 186 grid-rows: "first" 250px 1fr 250px "last"; | |
| 187 } | |
| 188 #item { | |
| 189 grid-column: start end; | |
| 190 grid-row: start end; | |
| 191 } | |
| 192 } | |
| 193 | |
| 194 @stylet RepeatingColumnsRows { | |
| 195 #grid { | |
| 196 display: -dart-grid; | |
| 197 grid-columns: 10px ("content" 1fr 10px)[4]; | |
| 198 grid-rows: 1fr; | |
| 199 } | |
| 200 #col2 { | |
| 201 grid-column: 2; | |
| 202 } | |
| 203 #col4 { | |
| 204 grid-column: 4; | |
| 205 } | |
| 206 #col6 { | |
| 207 grid-column: 6; | |
| 208 } | |
| 209 #col8 { | |
| 210 grid-column: 8; | |
| 211 } | |
| 212 } | |
| 213 | |
| 214 @stylet AnonymousGridCells { | |
| 215 #grid { | |
| 216 display: -dart-grid; | |
| 217 grid-rows: "header" auto "main" 1fr "footer" auto; | |
| 218 grid-columns: 1fr; | |
| 219 } | |
| 220 #header { | |
| 221 grid-row: "header"; | |
| 222 grid-column: start; | |
| 223 } | |
| 224 #main { | |
| 225 grid-row: "main"; | |
| 226 grid-column: start; | |
| 227 } | |
| 228 #footer { | |
| 229 grid-row: "footer"; | |
| 230 grid-column: start; | |
| 231 } | |
| 232 } | |
| 233 | |
| 234 @stylet ImplicitColumnsRows { | |
| 235 #grid { | |
| 236 display: -dart-grid; | |
| 237 grid-columns: 20px; | |
| 238 grid-rows: 20px; | |
| 239 } | |
| 240 #A { | |
| 241 grid-column: 1; | |
| 242 grid-row: 1; | |
| 243 grid-column-align: start; | |
| 244 grid-row-align: start; | |
| 245 } | |
| 246 #B { | |
| 247 grid-column: 5; | |
| 248 grid-row: 1; | |
| 249 grid-row-span: 2; | |
| 250 } | |
| 251 #C { | |
| 252 grid-column: 1; | |
| 253 grid-row: 2; | |
| 254 grid-column-span: 2; | |
| 255 } | |
| 256 } | |
| 257 | |
| 258 @stylet AlignGridItems { | |
| 259 #grid { | |
| 260 display: -dart-grid; | |
| 261 grid-columns: 1fr 1fr; | |
| 262 grid-rows: 1fr 1fr; | |
| 263 } | |
| 264 #A { | |
| 265 grid-column: 1; | |
| 266 grid-row: 1; | |
| 267 grid-column-align: start; | |
| 268 grid-row-align: start; | |
| 269 } | |
| 270 #B { | |
| 271 grid-column: 2; | |
| 272 grid-row: 2; | |
| 273 grid-column-align: end; | |
| 274 grid-row-align: end; | |
| 275 } | |
| 276 } | |
| 277 | |
| 278 @stylet DrawOrderGridItems { | |
| 279 #grid { | |
| 280 display: -dart-grid; | |
| 281 grid-columns: 1fr 1fr; | |
| 282 grid-rows: 1fr 1fr; | |
| 283 } | |
| 284 #A { | |
| 285 grid-column: 1; | |
| 286 grid-row: 2; | |
| 287 grid-column-span: 2; | |
| 288 grid-row-align: end; | |
| 289 } | |
| 290 #B { | |
| 291 grid-column: 1; | |
| 292 grid-row: 1; | |
| 293 grid-layer: 10; | |
| 294 } | |
| 295 #C { | |
| 296 grid-column: 2; | |
| 297 grid-row: 1; | |
| 298 grid-row-align: start; | |
| 299 margin-left: -20px; | |
| 300 } | |
| 301 #D { | |
| 302 grid-column: 2; | |
| 303 grid-row: 2; | |
| 304 grid-column-align: end; | |
| 305 grid-row-align: start; | |
| 306 } | |
| 307 #E { | |
| 308 grid-column: 1; grid-row: 1; | |
| 309 grid-column-span: 2; | |
| 310 grid-row-span: 2; | |
| 311 grid-layer: 5; | |
| 312 grid-column-align: center; | |
| 313 grid-row-align: center; | |
| 314 } | |
| 315 } | |
| 316 | |
| OLD | NEW |