| Index: samples/tests/samples/src/lib/layout/layout.scss
|
| ===================================================================
|
| --- samples/tests/samples/src/lib/layout/layout.scss (revision 0)
|
| +++ samples/tests/samples/src/lib/layout/layout.scss (revision 0)
|
| @@ -0,0 +1,316 @@
|
| +/* 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;
|
| + }
|
| + }
|
| +
|
|
|