mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -1,9 +0,0 @@
|
||||
@import "./grid";
|
||||
@import "./grid.ios.vars";
|
||||
|
||||
// iOS Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
.grid-ios {
|
||||
font-family: $grid-ios-font-family;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the grid
|
||||
$grid-ios-font-family: $font-family-ios-base !default;
|
||||
@ -1,9 +0,0 @@
|
||||
@import "./grid";
|
||||
@import "./grid.md.vars";
|
||||
|
||||
// Material Design Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
.grid-md {
|
||||
font-family: $grid-md-font-family;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the grid
|
||||
$grid-md-font-family: $font-family-md-base !default;
|
||||
@ -4,22 +4,6 @@
|
||||
// Responsive Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
// Creates the shared grid properties
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
@mixin make-grid($paddings: $grid-paddings) {
|
||||
@include make-breakpoint-padding($paddings);
|
||||
@include margin-horizontal(auto);
|
||||
|
||||
display: block;
|
||||
|
||||
// Remove the padding from grid and all immediate children columns
|
||||
&[no-padding],
|
||||
&[no-padding] > ion-col {
|
||||
@include padding(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Creates a fixed width for the grid based on the screen size
|
||||
// ---------------------------------------------------------------------------------
|
||||
@ -35,100 +19,6 @@
|
||||
}
|
||||
|
||||
|
||||
// Creates a flex row used to align columns
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
@mixin make-row() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&[nowrap] {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&[wrap-reverse] {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
&[align-items-start] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&[align-items-center] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&[align-items-end] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&[align-items-stretch] {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&[align-items-baseline] {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
&[justify-content-start] {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&[justify-content-center] {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&[justify-content-end] {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&[justify-content-around] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
&[justify-content-between] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Creates a column
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
@mixin make-column($column-paddings: $grid-column-paddings) {
|
||||
@include make-breakpoint-padding($column-paddings);
|
||||
@include margin(0);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 1px; // Prevent columns from collapsing when empty
|
||||
|
||||
&[align-self-start] {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
&[align-self-end] {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&[align-self-center] {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&[align-self-stretch] {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
&[align-self-baseline] {
|
||||
align-self: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Adds padding to the element based on breakpoints
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
|
||||
@ -3,18 +3,28 @@
|
||||
// Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-grid {
|
||||
@include make-grid();
|
||||
:host {
|
||||
@include make-breakpoint-padding($grid-paddings);
|
||||
@include margin-horizontal(auto);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.grid-fixed {
|
||||
// Fixed Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.grid-fixed) {
|
||||
@include make-grid-widths();
|
||||
}
|
||||
|
||||
ion-row {
|
||||
@include make-row();
|
||||
// Grid Padding
|
||||
// --------------------------------------------------
|
||||
|
||||
// Remove the padding from grid and all immediate children columns
|
||||
:host([no-padding]) {
|
||||
@include padding(0);
|
||||
}
|
||||
|
||||
ion-col {
|
||||
@include make-column();
|
||||
:host([no-padding]) ::slotted(ion-col) {
|
||||
@include padding(0);
|
||||
}
|
||||
|
||||
@ -3,19 +3,15 @@ import { Component, Prop } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-grid',
|
||||
styleUrls: {
|
||||
ios: 'grid.ios.scss',
|
||||
md: 'grid.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'grid'
|
||||
}
|
||||
styleUrl: 'grid.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class Grid {
|
||||
|
||||
/**
|
||||
* If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
|
||||
*/
|
||||
@Prop() fixed?: boolean;
|
||||
@Prop() fixed = false;
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
@ -24,4 +20,8 @@ export class Grid {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,16 +4,6 @@
|
||||
// Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the grid for different screen sizes
|
||||
/// when fixed is enabled
|
||||
$grid-widths: (
|
||||
xs: var(--ion-grid-width-xs, var(--ion-grid-width, 100%)),
|
||||
sm: var(--ion-grid-width-sm, var(--ion-grid-width, 540px)),
|
||||
md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)),
|
||||
lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)),
|
||||
xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))
|
||||
) !default;
|
||||
|
||||
/// @prop - The padding for the grid
|
||||
$grid-padding: var(--ion-grid-padding, 5px) !default;
|
||||
|
||||
@ -26,18 +16,12 @@ $grid-paddings: (
|
||||
xl: var(--ion-grid-padding-xl, $grid-padding)
|
||||
) !default;
|
||||
|
||||
|
||||
// Grid Columns
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - The padding for the grid column
|
||||
$grid-column-padding: var(--ion-grid-column-padding, 5px) !default;
|
||||
|
||||
/// @prop - The padding for the column at different breakpoints
|
||||
$grid-column-paddings: (
|
||||
xs: var(--ion-grid-column-padding-xs, $grid-column-padding),
|
||||
sm: var(--ion-grid-column-padding-sm, $grid-column-padding),
|
||||
md: var(--ion-grid-column-padding-md, $grid-column-padding),
|
||||
lg: var(--ion-grid-column-padding-lg, $grid-column-padding),
|
||||
xl: var(--ion-grid-column-padding-xl, $grid-column-padding)
|
||||
/// @prop - Width of the grid for different screen sizes
|
||||
/// when fixed is enabled
|
||||
$grid-widths: (
|
||||
xs: var(--ion-grid-width-xs, var(--ion-grid-width, 100%)),
|
||||
sm: var(--ion-grid-width-sm, var(--ion-grid-width, 540px)),
|
||||
md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)),
|
||||
lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)),
|
||||
xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))
|
||||
) !default;
|
||||
|
||||
@ -7,7 +7,6 @@ It is composed of three units — a grid, [row(s)](../Row) and [column(s)]((../C
|
||||
|
||||
See [Grid Layout](/docs/layout/grid) for more information.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -16,4 +16,4 @@ platforms.forEach(platform => {
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid - Offsets</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -18,23 +19,23 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>Push</h2>
|
||||
<h2 padding-start>Push</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="1" push="1">
|
||||
<ion-col size="auto" push="1">
|
||||
<div>
|
||||
ion-col push 3
|
||||
ion-col push 1
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="1" push="1">
|
||||
<ion-col size="auto" push="1">
|
||||
<div>
|
||||
ion-col push 2
|
||||
ion-col push 1
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Push and Pull</h2>
|
||||
<h2 padding-start>Push and Pull</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="9" push="3">
|
||||
@ -52,20 +53,20 @@
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="3" size-md="6" push="3" push-md="6">
|
||||
<ion-col size="3" size-md="6" push="9" push-md="6">
|
||||
<div>
|
||||
ion-col size="3" size-md="6" push="3" push-md="6"
|
||||
ion-col size="3" size-md="6" push="9" push-md="6"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="9" size-md="6" pull="9" pull-md="6">
|
||||
<ion-col size="9" size-md="6" pull="3" pull-md="6">
|
||||
<div>
|
||||
ion-col size="9" size-md="6" pull="9" pull-md="6"
|
||||
ion-col size="9" size-md="6" pull="3" pull-md="6"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Offset</h2>
|
||||
<h2 padding-start>Offset</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col offset="5">
|
||||
@ -114,7 +115,6 @@
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -16,4 +16,4 @@ platforms.forEach(platform => {
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid - Padding</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -18,7 +19,7 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>No Grid Padding</h2>
|
||||
<h2 padding-start>No Grid Padding</h2>
|
||||
<ion-grid no-padding>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
@ -44,7 +45,7 @@
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>No Grid Padding / Nested</h2>
|
||||
<h2 padding-start>No Grid Padding / Nested</h2>
|
||||
<ion-grid no-padding>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
@ -81,32 +82,33 @@
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Default Grid Padding</h2>
|
||||
<h2 padding-start>Default Grid Padding</h2>
|
||||
<ion-grid>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Custom Grid Padding By Breakpoint</h2>
|
||||
<h2 padding-start>Custom Grid Padding By Breakpoint</h2>
|
||||
<ion-grid class="custom-grid-padding">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
@ -132,7 +134,7 @@
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Custom Column Padding By Breakpoint</h2>
|
||||
<h2 padding-start>Custom Column Padding By Breakpoint</h2>
|
||||
<ion-grid class="custom-column-padding">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -16,4 +16,4 @@ platforms.forEach(platform => {
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid - Sizes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -18,10 +19,12 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>10 Column Layout</h2>
|
||||
<ion-grid id="grid10"></ion-grid>
|
||||
<h2 padding-start>10 Column Layout</h2>
|
||||
<ion-grid class="grid-10">
|
||||
<ion-row id="row10"></ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Responsive sm</h2>
|
||||
<h2 padding-start>Responsive sm</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
@ -47,7 +50,7 @@
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Breakpoint Sizes</h2>
|
||||
<h2 padding-start>Breakpoint Sizes</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
@ -174,7 +177,7 @@
|
||||
|
||||
cols.push(col);
|
||||
}
|
||||
const grid = document.getElementById('grid10');
|
||||
const grid = document.getElementById('row10');
|
||||
|
||||
grid.innerHTML = cols.join('');
|
||||
</script>
|
||||
@ -186,10 +189,9 @@
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
#grid10 {
|
||||
.grid-10 {
|
||||
--ion-grid-columns: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Grid - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user