| /* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ |
| /* for details. All rights reserved. Use of this source code is governed by a */ |
| /* BSD-style license that can be found in the LICENSE file. */ |
| |
| @stylet AdaptiveLayout { |
| #grid { |
| display: -dart-grid; |
| grid-columns: auto minmax(min-content, 1fr); |
| grid-rows: auto minmax(min-content, 1fr) auto; |
| } |
| #title { |
| grid-column: 1; |
| grid-row: 1; |
| } |
| #score { |
| grid-column: 1; |
| grid-row: 3; |
| } |
| #stats { |
| grid-column: 1; |
| grid-row: 2; |
| grid-row-align: start; |
| } |
| #board { |
| grid-column: 2; |
| grid-row: 1; |
| grid-row-span: 2; |
| } |
| #controls { |
| grid-column: 2; |
| grid-row: 3; |
| grid-column-align: center; |
| } |
| } |
| |
| @stylet SourceIndependencePortrait { |
| #grid { |
| display: -dart-grid; |
| grid-template: "ta" |
| "sa" |
| "bb" |
| "cc"; |
| grid-columns: auto minmax(min-content, 1fr); |
| grid-rows: auto auto minmax(min-content, 1fr) auto; |
| } |
| #title { |
| grid-cell: "t"; |
| } |
| #score { |
| grid-cell: "s"; |
| } |
| #stats { |
| grid-cell: "a"; |
| } |
| #board { |
| grid-cell: "b"; |
| } |
| #controls { |
| grid-cell: "c"; |
| } |
| } |
| |
| @stylet SourceIndependenceLandscape { |
| #grid { |
| display: -dart-grid; |
| grid-template: "tb" |
| "ab" |
| "sc"; |
| grid-columns: auto minmax(min-content, 1fr); |
| grid-rows: auto minmax(min-content, 1fr) auto; |
| } |
| #title { |
| grid-cell: "t"; |
| } |
| #score { |
| grid-cell: "s"; |
| } |
| #stats { |
| grid-cell: "a"; |
| } |
| #board { |
| grid-cell: "b"; |
| } |
| #controls { |
| grid-cell: "c"; |
| } |
| } |
| |
| @stylet GridLayering { |
| #grid { |
| display: -dart-grid; |
| grid-columns: "start" auto |
| "track-start" 0.5fr |
| "thumb-start" auto |
| "fill-split" auto |
| "thumb-end" 0.5fr |
| "track-end" auto |
| "end"; |
| } |
| #lower-label { |
| grid-column: "start"; |
| } |
| #track { |
| grid-column: "track-start" "track-end"; |
| grid-row-align: center; |
| } |
| #upper-label { |
| grid-column: "track-end"; |
| } |
| #lower-fill { |
| grid-column: "track-start" "fill-split"; |
| grid-row-align: center; grid-layer: 5; |
| } |
| #upper-fill { |
| grid-column: "fill-split" "track-end"; |
| grid-row-align: center; |
| grid-layer: 5; |
| } |
| #thumb { |
| grid-column: "thumb-start" "thumb-end"; |
| grid-layer: 10; |
| } |
| } |
| |
| @stylet GridLines_5 { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 150px 1fr; |
| grid-rows: 50px 1fr 50px; |
| } |
| #item1 { |
| grid-column: 2; |
| grid-row: 1 4; |
| } |
| } |
| |
| @stylet GridLines_6 { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 150px "item1-start" 1fr "item1-end"; |
| grid-rows: "item1-start" 50px 1fr 50px "item1-end"; |
| } |
| |
| #item1 { |
| grid-column: "item1-start" "item1-end"; |
| grid-row: "item1-start" "item1-end"; |
| } |
| } |
| |
| @stylet GridCells { |
| #grid { |
| display: -dart-grid; |
| grid-template: "ad" |
| "bd" |
| "cd"; |
| grid-columns: 150px 1fr; |
| grid-rows: 50px 1fr 50px; |
| } |
| #item2 { |
| grid-cell: "b"; |
| grid-row-align: start; |
| } |
| #item3 { |
| grid-cell: "b"; |
| grid-column-align: end; |
| grid-row-align: end; |
| } |
| } |
| |
| @stylet StartEndingGridlines11a { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 50px 1fr; |
| grid-rows: "first" 250px 1fr 250px "last"; |
| } |
| #item { |
| grid-column:1 3; |
| grid-row: "first" "last"; |
| } |
| } |
| |
| @stylet StartEndingGridlines11b { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 50px 1fr; |
| grid-rows: "first" 250px 1fr 250px "last"; |
| } |
| #item { |
| grid-column: start end; |
| grid-row: start end; |
| } |
| } |
| |
| @stylet RepeatingColumnsRows { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 10px ("content" 1fr 10px)[4]; |
| grid-rows: 1fr; |
| } |
| #col2 { |
| grid-column: 2; |
| } |
| #col4 { |
| grid-column: 4; |
| } |
| #col6 { |
| grid-column: 6; |
| } |
| #col8 { |
| grid-column: 8; |
| } |
| } |
| |
| @stylet AnonymousGridCells { |
| #grid { |
| display: -dart-grid; |
| grid-rows: "header" auto "main" 1fr "footer" auto; |
| grid-columns: 1fr; |
| } |
| #header { |
| grid-row: "header"; |
| grid-column: start; |
| } |
| #main { |
| grid-row: "main"; |
| grid-column: start; |
| } |
| #footer { |
| grid-row: "footer"; |
| grid-column: start; |
| } |
| } |
| |
| @stylet ImplicitColumnsRows { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 20px; |
| grid-rows: 20px; |
| } |
| #A { |
| grid-column: 1; |
| grid-row: 1; |
| grid-column-align: start; |
| grid-row-align: start; |
| } |
| #B { |
| grid-column: 5; |
| grid-row: 1; |
| grid-row-span: 2; |
| } |
| #C { |
| grid-column: 1; |
| grid-row: 2; |
| grid-column-span: 2; |
| } |
| } |
| |
| @stylet AlignGridItems { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 1fr 1fr; |
| grid-rows: 1fr 1fr; |
| } |
| #A { |
| grid-column: 1; |
| grid-row: 1; |
| grid-column-align: start; |
| grid-row-align: start; |
| } |
| #B { |
| grid-column: 2; |
| grid-row: 2; |
| grid-column-align: end; |
| grid-row-align: end; |
| } |
| } |
| |
| @stylet DrawOrderGridItems { |
| #grid { |
| display: -dart-grid; |
| grid-columns: 1fr 1fr; |
| grid-rows: 1fr 1fr; |
| } |
| #A { |
| grid-column: 1; |
| grid-row: 2; |
| grid-column-span: 2; |
| grid-row-align: end; |
| } |
| #B { |
| grid-column: 1; |
| grid-row: 1; |
| grid-layer: 10; |
| } |
| #C { |
| grid-column: 2; |
| grid-row: 1; |
| grid-row-align: start; |
| margin-left: -20px; |
| } |
| #D { |
| grid-column: 2; |
| grid-row: 2; |
| grid-column-align: end; |
| grid-row-align: start; |
| } |
| #E { |
| grid-column: 1; grid-row: 1; |
| grid-column-span: 2; |
| grid-row-span: 2; |
| grid-layer: 5; |
| grid-column-align: center; |
| grid-row-align: center; |
| } |
| } |
| |