mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
grid system
This commit is contained in:
Adam Bradley
209
dist/css/ionic.css
vendored
209
dist/css/ionic.css
vendored
@@ -2091,7 +2091,7 @@ sub {
|
||||
fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
border: 1px solid silver; }
|
||||
border: 1px solid #c0c0c0; }
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
@@ -3974,7 +3974,7 @@ input[type="file"] {
|
||||
line-height: 34px; }
|
||||
|
||||
select {
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid #ccc;
|
||||
background-color: white; }
|
||||
|
||||
select[multiple],
|
||||
@@ -4033,7 +4033,7 @@ input[type="checkbox"][readonly] {
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
content: ' ';
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
transition: background-color .1s ease-in-out; }
|
||||
|
||||
/* the checkmark within the box */
|
||||
.checkbox input:after {
|
||||
@@ -4048,7 +4048,7 @@ input[type="checkbox"][readonly] {
|
||||
border-right: 0;
|
||||
content: ' ';
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s ease-in-out;
|
||||
transition: opacity .05s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
|
||||
@@ -4477,7 +4477,7 @@ input[type="range"] {
|
||||
.button-icon:active, .button-icon.active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
text-shadow: 0px 0px 10px white; }
|
||||
text-shadow: 0px 0px 10px #fff; }
|
||||
|
||||
.padding > .button.block:first-child {
|
||||
margin-top: 0; }
|
||||
@@ -4727,178 +4727,171 @@ a.button {
|
||||
* --------------------------------------------------
|
||||
* Using flexbox for the grid, inspired by Philip Walton:
|
||||
* http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||||
* By default each .col within a .row will evenly take up
|
||||
* available width, and the height of each .col with take
|
||||
* up the height of the tallest .col in the same .row.
|
||||
*/
|
||||
.grid {
|
||||
.row {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
display: flex;
|
||||
padding: 5px; }
|
||||
|
||||
.grid-cell {
|
||||
.row + .row {
|
||||
margin-top: -5px;
|
||||
padding-top: 0; }
|
||||
|
||||
.col {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 5px; }
|
||||
|
||||
/* With gutters */
|
||||
.grid-gutters {
|
||||
margin-left: -1em; }
|
||||
|
||||
.grid-gutters > .grid-cell {
|
||||
padding-left: 1em; }
|
||||
|
||||
/* Alignment per row */
|
||||
.grid-top {
|
||||
/* Vertically Align Columns */
|
||||
/* .row-* vertically aligns every .col in the .row */
|
||||
.row-top {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-moz-align-items: flex-start;
|
||||
align-items: flex-start; }
|
||||
|
||||
.grid-bottom {
|
||||
.row-bottom {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-moz-align-items: flex-end;
|
||||
align-items: flex-end; }
|
||||
|
||||
.grid-center {
|
||||
.row-middle {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center; }
|
||||
|
||||
/* Alignment per cell */
|
||||
.grid-cell-top {
|
||||
/* .col-* vertically aligns an individual .col */
|
||||
.col-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-moz-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start; }
|
||||
|
||||
.grid-cell-bottom {
|
||||
.col-bottom {
|
||||
-webkit-align-self: flex-end;
|
||||
-moz-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end; }
|
||||
|
||||
.grid-cell-center {
|
||||
.col-middle {
|
||||
-webkit-align-self: center;
|
||||
-moz-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center; }
|
||||
|
||||
/* Base classes for all media */
|
||||
.grid-fit > .grid-cell {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
/* Horizontally Align Columns */
|
||||
.col-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
.grid-full > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 100%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 100%;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%; }
|
||||
/* Column Offsets */
|
||||
.col-offset-20 {
|
||||
margin-left: 20%; }
|
||||
|
||||
.grid-1of2 > .grid-cell,
|
||||
.grid-2of4 > .grid-cell,
|
||||
.grid-3of6 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 50%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 50%;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%; }
|
||||
.col-offset-25 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.grid-1of3 > .grid-cell,
|
||||
.grid-2of6 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 33.3333%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 33.3333%;
|
||||
-ms-flex: 0 0 33.3333%;
|
||||
flex: 0 0 33.3333%; }
|
||||
.col-offset-33, .col-offset-34 {
|
||||
margin-left: 33.3333%; }
|
||||
|
||||
.grid-2of3 > .grid-cell,
|
||||
.grid-4of6 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 66.6666%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 66.6666%;
|
||||
-ms-flex: 0 0 66.6666%;
|
||||
flex: 0 0 66.6666%; }
|
||||
.col-offset-50 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.grid-1of4 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 25%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 25%;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%; }
|
||||
.col-offset-66, .col-offset-67 {
|
||||
margin-left: 66.6666%; }
|
||||
|
||||
.grid-3of4 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 75%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 75%;
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%; }
|
||||
.col-offset-75 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.grid-1of5 > .grid-cell {
|
||||
.col-offset-80 {
|
||||
margin-left: 80%; }
|
||||
|
||||
/* Explicit Column Percent Sizes */
|
||||
/* By default each grid column will evenly distribute */
|
||||
/* across the grid. However, you can specify individual */
|
||||
/* columns to take up a certain size of the available area */
|
||||
.col-20 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 20%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 20%;
|
||||
-ms-flex: 0 0 20%;
|
||||
flex: 0 0 20%; }
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%; }
|
||||
|
||||
.grid-2of5 > .grid-cell {
|
||||
.col-25 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 40%;
|
||||
-webkit-flex: 0 0 25%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 40%;
|
||||
-ms-flex: 0 0 40%;
|
||||
flex: 0 0 40%; }
|
||||
-moz-flex: 0 0 25%;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%; }
|
||||
|
||||
.grid-3of5 > .grid-cell {
|
||||
.col-33, .col-34 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 60%;
|
||||
-webkit-flex: 0 0 33.3333%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 60%;
|
||||
-ms-flex: 0 0 60%;
|
||||
flex: 0 0 60%; }
|
||||
-moz-flex: 0 0 33.3333%;
|
||||
-ms-flex: 0 0 33.3333%;
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%; }
|
||||
|
||||
.grid-4of5 > .grid-cell {
|
||||
.col-50 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 50%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 50%;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%; }
|
||||
|
||||
.col-66, .col-67 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 66.6666%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 66.6666%;
|
||||
-ms-flex: 0 0 66.6666%;
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%; }
|
||||
|
||||
.col-75 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 75%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 75%;
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%; }
|
||||
|
||||
.col-80 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 80%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 80%;
|
||||
-ms-flex: 0 0 80%;
|
||||
flex: 0 0 80%; }
|
||||
|
||||
.grid-1of6 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 16.6666%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 16.6666%;
|
||||
-ms-flex: 0 0 16.6666%;
|
||||
flex: 0 0 16.6666%; }
|
||||
|
||||
.grid-5of6 > .grid-cell {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 83.3333%;
|
||||
-moz-box-flex: 0;
|
||||
-moz-flex: 0 0 83.3333%;
|
||||
-ms-flex: 0 0 83.3333%;
|
||||
flex: 0 0 83.3333%; }
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%; }
|
||||
|
||||
/**
|
||||
* Icons
|
||||
|
||||
5
dist/css/themes/ionic-ios7.css
vendored
5
dist/css/themes/ionic-ios7.css
vendored
@@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
* Mixins
|
||||
* --------------------------------------------------
|
||||
@@ -124,7 +123,7 @@
|
||||
right: 20px;
|
||||
transition: 0.2s ease;
|
||||
transition-property: left, right;
|
||||
transition-delay: 0s, 0.05s; }
|
||||
transition-delay: 0s, .05s; }
|
||||
|
||||
.toggle :checked + .track {
|
||||
/* When the toggle is "on" */
|
||||
@@ -139,4 +138,4 @@
|
||||
right: 0;
|
||||
left: 20px;
|
||||
-webkit-transform: none;
|
||||
transition-delay: 0.05s, 0s; }
|
||||
transition-delay: .05s, 0s; }
|
||||
|
||||
143
scss/_grid.scss
143
scss/_grid.scss
@@ -4,88 +4,111 @@
|
||||
* --------------------------------------------------
|
||||
* Using flexbox for the grid, inspired by Philip Walton:
|
||||
* http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||||
* By default each .col within a .row will evenly take up
|
||||
* available width, and the height of each .col with take
|
||||
* up the height of the tallest .col in the same .row.
|
||||
*/
|
||||
|
||||
.grid {
|
||||
.row {
|
||||
@include display-flex();
|
||||
padding: ($grid-padding-width / 2);
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
.row + .row {
|
||||
margin-top: ($grid-padding-width / 2) * -1;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.col {
|
||||
@include flex(1);
|
||||
@include display-flex();
|
||||
padding: ($grid-padding-width / 2);
|
||||
}
|
||||
|
||||
/* With gutters */
|
||||
.grid-gutters {
|
||||
margin-left: $grid-gutter-width * -1;
|
||||
}
|
||||
.grid-gutters > .grid-cell {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
|
||||
/* Alignment per row */
|
||||
.grid-top {
|
||||
/* Vertically Align Columns */
|
||||
/* .row-* vertically aligns every .col in the .row */
|
||||
.row-top {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
.grid-bottom {
|
||||
.row-bottom {
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
.grid-center {
|
||||
.row-middle {
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
/* Alignment per cell */
|
||||
.grid-cell-top {
|
||||
/* .col-* vertically aligns an individual .col */
|
||||
.col-top {
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
.grid-cell-bottom {
|
||||
.col-bottom {
|
||||
@include align-self(flex-end);
|
||||
}
|
||||
.grid-cell-center {
|
||||
.col-middle {
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
/* Base classes for all media */
|
||||
.grid-fit > .grid-cell {
|
||||
@include flex(1);
|
||||
}
|
||||
.grid-full > .grid-cell {
|
||||
@include flex(0, 0, 100%);
|
||||
}
|
||||
.grid-1of2 > .grid-cell,
|
||||
.grid-2of4 > .grid-cell,
|
||||
.grid-3of6 > .grid-cell {
|
||||
@include flex(0, 0, 50%);
|
||||
}
|
||||
.grid-1of3 > .grid-cell,
|
||||
.grid-2of6 > .grid-cell {
|
||||
@include flex(0, 0, 33.3333%);
|
||||
}
|
||||
.grid-2of3 > .grid-cell,
|
||||
.grid-4of6 > .grid-cell {
|
||||
@include flex(0, 0, 66.6666%);
|
||||
}
|
||||
.grid-1of4 > .grid-cell {
|
||||
@include flex(0, 0, 25%);
|
||||
}
|
||||
.grid-3of4 > .grid-cell {
|
||||
@include flex(0, 0, 75%);
|
||||
}
|
||||
.grid-1of5 > .grid-cell {
|
||||
@include flex(0, 0, 20%);
|
||||
}
|
||||
.grid-2of5 > .grid-cell {
|
||||
@include flex(0, 0, 40%);
|
||||
}
|
||||
.grid-3of5 > .grid-cell {
|
||||
@include flex(0, 0, 60%);
|
||||
}
|
||||
.grid-4of5 > .grid-cell {
|
||||
@include flex(0, 0, 80%);
|
||||
}
|
||||
.grid-1of6 > .grid-cell {
|
||||
@include flex(0, 0, 16.6666%);
|
||||
}
|
||||
.grid-5of6 > .grid-cell {
|
||||
@include flex(0, 0, 83.3333%);
|
||||
|
||||
/* Horizontally Align Columns */
|
||||
.col-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Column Offsets */
|
||||
.col-offset-20 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.col-offset-25 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-offset-33, .col-offset-34 {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
.col-offset-50 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-offset-66, .col-offset-67 {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
.col-offset-75 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-offset-80 {
|
||||
margin-left: 80%;
|
||||
}
|
||||
|
||||
|
||||
/* Explicit Column Percent Sizes */
|
||||
/* By default each grid column will evenly distribute */
|
||||
/* across the grid. However, you can specify individual */
|
||||
/* columns to take up a certain size of the available area */
|
||||
.col-20 {
|
||||
@include flex(0, 0, 20%);
|
||||
max-width: 20%
|
||||
}
|
||||
.col-25 {
|
||||
@include flex(0, 0, 25%);
|
||||
max-width: 25%
|
||||
}
|
||||
.col-33, .col-34 {
|
||||
@include flex(0, 0, 33.3333%);
|
||||
max-width: 33.3333%
|
||||
}
|
||||
.col-50 {
|
||||
@include flex(0, 0, 50%);
|
||||
max-width: 50%
|
||||
}
|
||||
.col-66, .col-67 {
|
||||
@include flex(0, 0, 66.6666%);
|
||||
max-width: 66.6666%
|
||||
}
|
||||
.col-75 {
|
||||
@include flex(0, 0, 75%);
|
||||
max-width: 75%
|
||||
}
|
||||
.col-80 {
|
||||
@include flex(0, 0, 80%);
|
||||
max-width: 80%
|
||||
}
|
||||
|
||||
@@ -425,7 +425,7 @@ $modal-bg-color: #fff !default;
|
||||
// Grids
|
||||
// -------------------------------
|
||||
|
||||
$grid-gutter-width: 1em !default;
|
||||
$grid-padding-width: 10px !default;
|
||||
|
||||
|
||||
// Action Sheets
|
||||
|
||||
235
test/grid.html
Normal file
235
test/grid.html
Normal file
@@ -0,0 +1,235 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Grid</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
<style>
|
||||
h4 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.col > * {
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Grid</h1>
|
||||
</header>
|
||||
|
||||
<div class="content has-header">
|
||||
|
||||
<h3>.row</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-50">
|
||||
<div>
|
||||
.col.col-50
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-25">
|
||||
<div>
|
||||
.col.col-25
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-25">
|
||||
<div>
|
||||
.col.col-25
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-25">
|
||||
<div>
|
||||
.col.col-25
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-25 col-offset-25">
|
||||
<div>
|
||||
.col.col-25.col-offset-25
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-50 col-center">
|
||||
<div>
|
||||
.col.col-50.col-center
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
.col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-top">
|
||||
<div>
|
||||
.col.col-top
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-middle">
|
||||
<div>
|
||||
.col.col-middle
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-bottom">
|
||||
<div>
|
||||
.col.col-bottom
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-top">
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-top .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-top .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-bottom">
|
||||
<div>
|
||||
.row-top .col.col-bottom
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-middle">
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-middle .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-middle .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-middle .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-bottom">
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-bottom .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-top">
|
||||
<div>
|
||||
.row-bottom .col.col-top
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.row-bottom .col
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
.col<br>#<br>#
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -12,28 +12,31 @@
|
||||
<h1 class="title">Ionic Tests</h1>
|
||||
</header>
|
||||
|
||||
<div class="content padding has-header">
|
||||
<div class="content has-header">
|
||||
|
||||
<p><a class="button button-block button-default" href="buttons.html"><i class="icon ion-star"></i> Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-bar.html"><i class="icon ion-star"></i> Button Bar</a></p>
|
||||
<p><a class="button button-block button-default" href="cards.html"><i class="icon ion-star"></i> Cards</a></p>
|
||||
<p><a class="button button-block button-default" href="footers.html"><i class="icon ion-star"></i> Footers</a></p>
|
||||
<p><a class="button button-block button-default" href="headers.html"><i class="icon ion-star"></i> Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html"><i class="icon ion-star"></i> Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon ion-star"></i> Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon ion-star"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon ion-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon ion-star"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon ion-star"></i> Input: Checkbox</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon ion-star"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon ion-star"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon ion-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon ion-star-empty"></i> Popovers</a></p>
|
||||
<p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon ion-star-empty"></i> Pull To Refresh</a></p>
|
||||
<p><a class="button button-block button-default" href="side-menus.html"><i class="icon ion-star-empty"></i> Side Menus</a></p>
|
||||
<p><a class="button button-block button-default" href="swipe.html"><i class="icon ion-star-empty"></i> Swipe</a></p>
|
||||
<p><a class="button button-block button-default" href="tab-bars.html"><i class="icon ion-star-half-empty"></i> Tab Bars</a></p>
|
||||
<p><a class="button button-block button-default" href="type.html"><i class="icon ion-star"></i> Type</a></p>
|
||||
<div class="list">
|
||||
<a class="item" href="buttons.html">Buttons</a>
|
||||
<a class="item" href="button-bar.html">Button Bar</a>
|
||||
<a class="item" href="cards.html">Cards</a>
|
||||
<a class="item" href="footers.html">Footers</a>
|
||||
<a class="item" href="grid.html">Grid</a>
|
||||
<a class="item" href="headers.html">Headers</a>
|
||||
<a class="item" href="input-text.html">Input: Text (single-line)</a>
|
||||
<a class="item" href="input-textarea.html">Input: Text (multi-line)</a>
|
||||
<a class="item" href="input-radio.html">Input: Radio Buttons</a>
|
||||
<a class="item" href="input-range.html">Input: Range</a>
|
||||
<a class="item" href="input-select.html">Input: Select</a>
|
||||
<a class="item" href="input-checkbox.html">Input: Checkbox</a>
|
||||
<a class="item" href="input-toggle.html">Input: Toggle</a>
|
||||
<a class="item" href="lists.html">Lists</a>
|
||||
<a class="item" href="modals.html">Modals</a>
|
||||
<a class="item" href="popovers.html">Popovers</a>
|
||||
<a class="item" href="pull-to-refresh.html">Pull To Refresh</a>
|
||||
<a class="item" href="side-menus.html">Side Menus</a>
|
||||
<a class="item" href="swipe.html">Swipe</a>
|
||||
<a class="item" href="tab-bars.html">Tab Bars</a>
|
||||
<a class="item" href="type.html">Type</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user