mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +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
@ -6,93 +6,94 @@
|
||||
<title>Hide When - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when mode="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when mode="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when mode="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when mode="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<ion-hide-when orientation="portrait">
|
||||
<div>Hides on portrait orientation</div>
|
||||
</ion-hide-when>
|
||||
<h2>Orientation Tests</h2>
|
||||
<ion-hide-when orientation="portrait">
|
||||
<div>Hides on portrait orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when orientation="landscape">
|
||||
<div>Hides on landscape orientation</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when orientation="landscape">
|
||||
<div>Hides on landscape orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<ion-hide-when platform="android,ios">
|
||||
<div>Hides on Android and iOS</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="android,ios">
|
||||
<div>Hides on Android and iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ios">
|
||||
<div>Only hide on iOS</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="ios">
|
||||
<div>Only hide on iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="android">
|
||||
<div>Only hide on Android</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="android">
|
||||
<div>Only hide on Android</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ipad">
|
||||
<div>Only hide on ipad</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="ipad">
|
||||
<div>Only hide on ipad</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="phablet">
|
||||
<div>Only hide on phablet</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="phablet">
|
||||
<div>Only hide on phablet</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="iphone">
|
||||
<div>Only hide on phone</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="iphone">
|
||||
<div>Only hide on phone</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<ion-hide-when size="xs">
|
||||
<div>Only hide on xs</div>
|
||||
</ion-hide-when>
|
||||
<h2>Size Tests</h2>
|
||||
<ion-hide-when size="xs">
|
||||
<div>Only hide on xs</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="sm">
|
||||
<div>Only hide on sm</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="sm">
|
||||
<div>Only hide on sm</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="md">
|
||||
<div>Only hide on md</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="md">
|
||||
<div>Only hide on md</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="lg">
|
||||
<div>Only hide on lg</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="lg">
|
||||
<div>Only hide on lg</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xl">
|
||||
<div>Only hide on xl</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="xl">
|
||||
<div>Only hide on xl</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xs, m">
|
||||
<div>Only hide on XS or m</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="xs, m">
|
||||
<div>Only hide on XS or m</div>
|
||||
</ion-hide-when>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
@ -6,93 +6,94 @@
|
||||
<title>Hide When</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Hide when</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-content padding>
|
||||
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when mode="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
<h2>Mode Tests</h2>
|
||||
<ion-hide-when mode="md, ios">
|
||||
<div>Hides on MD, iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when mode="md">
|
||||
<div>Hides on MD only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when mode="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when mode="ios">
|
||||
<div>Hides on iOS only</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Orientation Tests</h2>
|
||||
<ion-hide-when orientation="portrait">
|
||||
<div>Hides on portrait orientation</div>
|
||||
</ion-hide-when>
|
||||
<h2>Orientation Tests</h2>
|
||||
<ion-hide-when orientation="portrait">
|
||||
<div>Hides on portrait orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when orientation="landscape">
|
||||
<div>Hides on landscape orientation</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when orientation="landscape">
|
||||
<div>Hides on landscape orientation</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Platform Tests</h2>
|
||||
<h2>Platform Tests</h2>
|
||||
|
||||
<ion-hide-when platform="android,ios">
|
||||
<div>Hides on Android and iOS</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="android,ios">
|
||||
<div>Hides on Android and iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ios">
|
||||
<div>Only hide on iOS</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="ios">
|
||||
<div>Only hide on iOS</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="android">
|
||||
<div>Only hide on Android</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="android">
|
||||
<div>Only hide on Android</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="ipad">
|
||||
<div>Only hide on ipad</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="ipad">
|
||||
<div>Only hide on ipad</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="phablet">
|
||||
<div>Only hide on phablet</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="phablet">
|
||||
<div>Only hide on phablet</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when platform="iphone">
|
||||
<div>Only hide on phone</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when platform="iphone">
|
||||
<div>Only hide on phone</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<h2>Size Tests</h2>
|
||||
<ion-hide-when size="xs">
|
||||
<div>Only hide on xs</div>
|
||||
</ion-hide-when>
|
||||
<h2>Size Tests</h2>
|
||||
<ion-hide-when size="xs">
|
||||
<div>Only hide on xs</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="sm">
|
||||
<div>Only hide on sm</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="sm">
|
||||
<div>Only hide on sm</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="md">
|
||||
<div>Only hide on md</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="md">
|
||||
<div>Only hide on md</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="lg">
|
||||
<div>Only hide on lg</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="lg">
|
||||
<div>Only hide on lg</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xl">
|
||||
<div>Only hide on xl</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="xl">
|
||||
<div>Only hide on xl</div>
|
||||
</ion-hide-when>
|
||||
|
||||
<ion-hide-when size="xs, m">
|
||||
<div>Only hide on XS or m</div>
|
||||
</ion-hide-when>
|
||||
<ion-hide-when size="xs, m">
|
||||
<div>Only hide on XS or m</div>
|
||||
</ion-hide-when>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
|
||||
</ion-app>
|
||||
|
||||
Reference in New Issue
Block a user