mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +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,11 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toolbar - 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>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
@ -117,23 +120,22 @@
|
||||
.rainbow-content {
|
||||
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let items = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push( i+1 );
|
||||
items.push(i + 1);
|
||||
}
|
||||
const list = document.getElementById('dynamicList');
|
||||
|
||||
let html = '';
|
||||
for(let item of items) {
|
||||
for (let item of items) {
|
||||
html += `<ion-item>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@ const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/toolbar/test/basic?ionic:mode=${platform}`);
|
||||
super(driver, `http://localhost:3333/src/components/toolbar/test/colors?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('toolbar/basic', () => {
|
||||
describe('toolbar/colors', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
|
||||
@ -5,48 +5,149 @@
|
||||
<title>Toolbar - Colors</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>
|
||||
<ion-app>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="primary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Primary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tertiary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="warning">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Warning</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="danger">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Danger</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="light">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="medium">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Medium</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button color="danger">
|
||||
<ion-icon slot="icon-only" name="add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toolbar</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>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
@ -175,6 +178,7 @@
|
||||
.rainbow-content {
|
||||
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -183,7 +187,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toolbar - Scenarios</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>
|
||||
<ion-app>
|
||||
<ion-content id="content">
|
||||
@ -242,4 +245,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Toolbar - 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>
|
||||
|
||||
@ -1,52 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Toolbar - Translucent</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>
|
||||
<ion-app>
|
||||
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="dark">
|
||||
<ion-title>Dark - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-toolbar translucent color="danger">
|
||||
<ion-title>Toolbar - Danger Translucent</ion-title>
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar translucent color="dark">
|
||||
<ion-title>Toolbar - Dark Translucent</ion-title>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-content fullscreen>
|
||||
<ion-grid>
|
||||
@ -134,9 +126,8 @@
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,333 +4,47 @@
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-ios {
|
||||
:host {
|
||||
@include padding($toolbar-ios-padding);
|
||||
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
font-family: $toolbar-ios-font-family;
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include safe-area-padding-horizontal($toolbar-ios-padding);
|
||||
}
|
||||
// default color / background
|
||||
--ion-color-base: #{$toolbar-ios-background-color};
|
||||
--ion-color-contrast: #{$toolbar-ios-text-color};
|
||||
|
||||
--border-color: #{$toolbar-ios-border-color};
|
||||
--translucent-filter: #{$toolbar-ios-translucent-filter};
|
||||
--translucent-background: #{$toolbar-ios-translucent-background-color};
|
||||
}
|
||||
|
||||
.header-ios {
|
||||
min-height: $toolbar-ios-height;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Background
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-background-ios {
|
||||
background: $toolbar-ios-background-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Header / Footer Borders
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-ios .toolbar-background-ios,
|
||||
.footer-ios .toolbar-background-ios {
|
||||
border-style: solid;
|
||||
border-color: $toolbar-ios-border-color;
|
||||
}
|
||||
|
||||
.header-ios .toolbar-ios:last-child .toolbar-background-ios {
|
||||
border-width: 0 0 $hairlines-width;
|
||||
}
|
||||
|
||||
.footer-ios .toolbar-ios:first-child .toolbar-background-ios {
|
||||
border-width: $hairlines-width 0 0;
|
||||
}
|
||||
|
||||
.header-ios[no-border] .toolbar-ios:last-child .toolbar-background-ios {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.footer-ios[no-border] .toolbar-ios:first-child .toolbar-background-ios {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Translucent Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-translucent-ios .toolbar-background-ios,
|
||||
.footer-translucent-ios .toolbar-background-ios,
|
||||
.toolbar-translucent-ios .toolbar-background-ios {
|
||||
background: $toolbar-ios-translucent-background-color;
|
||||
}
|
||||
|
||||
.toolbar-translucent-ios .toolbar-background-ios {
|
||||
backdrop-filter: $toolbar-ios-translucent-filter;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-content-ios {
|
||||
.toolbar-content {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-ios, content);
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@mixin ios-toolbar-theme($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
$color-translucent: $toolbar-ios-translucent-background-color;
|
||||
::slotted(ion-title) {
|
||||
@include position(0, null, null, 0);
|
||||
@include padding(0, 90px, 0px);
|
||||
text-align: $toolbar-ios-title-text-align;
|
||||
|
||||
.toolbar-ios-#{$color-name} {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
|
||||
.toolbar-background-ios {
|
||||
background: $color-base;
|
||||
}
|
||||
|
||||
.bar-button-clear-ios,
|
||||
.back-button-ios .back-button-inner,
|
||||
.bar-button-default-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include ios-bar-button-default($color-name);
|
||||
@include ios-bar-button-outline($color-name);
|
||||
@include ios-bar-button-solid($color-name);
|
||||
}
|
||||
}
|
||||
|
||||
// Colored toolbars with translucency
|
||||
.header-translucent-ios .toolbar-ios-#{$color-name},
|
||||
.footer-translucent-ios .toolbar-ios-#{$color-name},
|
||||
.toolbar-translucent-ios-#{$color-name} {
|
||||
|
||||
.toolbar-background-ios {
|
||||
background: $color-translucent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Placement
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-buttons-ios {
|
||||
order: map-get($toolbar-order-ios, buttons-secondary);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: $toolbar-ios-title-font-weight;
|
||||
letter-spacing: -.03em;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="start"] {
|
||||
order: map-get($toolbar-order-ios, buttons-start);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="primary"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-ios, buttons-primary);
|
||||
}
|
||||
|
||||
.bar-buttons-ios[slot="end"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// iOS Toolbar Button Default
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-ios {
|
||||
@include padding(0, 4px);
|
||||
@include border-radius($toolbar-ios-button-border-radius);
|
||||
|
||||
height: 32px;
|
||||
|
||||
border: 0;
|
||||
font-size: $toolbar-ios-button-font-size;
|
||||
}
|
||||
|
||||
@mixin ios-bar-button-default($color-name, $color-base: null) {
|
||||
@if ($color-base == null) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
}
|
||||
|
||||
.bar-button-#{$color-name}-ios,
|
||||
.bar-button-clear-ios-#{$color-name},
|
||||
.bar-button-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-#{$color-name}-ios:hover,
|
||||
.bar-button-clear-ios-#{$color-name}:hover,
|
||||
.bar-button-ios-#{$color-name}:hover {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// iOS Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-ios .icon {
|
||||
fill: $toolbar-ios-button-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Outline
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-outline-ios {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $toolbar-ios-button-color;
|
||||
color: $toolbar-ios-button-color;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
color: $toolbar-ios-background-color;
|
||||
background-color: $toolbar-ios-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-outline-ios:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@mixin ios-bar-button-outline($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.bar-button-outline-ios-#{$color-name} {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Solid
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-solid-ios {
|
||||
color: $toolbar-ios-button-background-color;
|
||||
background-color: $toolbar-ios-button-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $toolbar-ios-button-background-color;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
color: $toolbar-ios-button-background-color;
|
||||
background-color: $toolbar-ios-button-background-color-activated;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-solid-ios:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@mixin ios-bar-button-solid($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
$color-shade: ion-color($colors-ios, $color-name, tint, ios);
|
||||
|
||||
.bar-button-solid-ios-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
|
||||
&.activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-shade;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-ios ion-icon[slot="start"] {
|
||||
@include padding-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-ios ion-icon[slot="end"] {
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-ios ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
|
||||
font-size: 1.8em;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-menutoggle-ios {
|
||||
@include margin(0, 6px);
|
||||
@include padding(0);
|
||||
|
||||
order: map-get($toolbar-order-ios, menu-toggle-start);
|
||||
|
||||
min-width: 36px;
|
||||
|
||||
ion-icon {
|
||||
@include padding(0, 6px);
|
||||
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@include ios-bar-button-default(default, $toolbar-ios-button-color);
|
||||
@include ios-bar-button-default(clear, $toolbar-ios-button-color);
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include ios-toolbar-theme($color-name);
|
||||
@include ios-bar-button-default($color-name);
|
||||
@include ios-bar-button-outline($color-name);
|
||||
@include ios-bar-button-solid($color-name);
|
||||
}
|
||||
|
||||
|
||||
// iOS strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-strong-ios {
|
||||
font-weight: $toolbar-ios-button-strong-font-weight;
|
||||
}
|
||||
|
||||
@ -16,13 +16,13 @@ $toolbar-order-ios: (
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
$toolbar-ios-font-family: $font-family-ios-base !default;
|
||||
$toolbar-ios-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Font size of the toolbar button
|
||||
$toolbar-ios-button-font-size: 17px !default;
|
||||
|
||||
/// @prop - Text color of the toolbar button
|
||||
$toolbar-ios-button-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
$toolbar-ios-button-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the toolbar button
|
||||
$toolbar-ios-button-background-color: $toolbar-ios-background-color !default;
|
||||
@ -41,3 +41,19 @@ $toolbar-ios-button-icon-fill-color: currentColor !default;
|
||||
|
||||
/// @prop - Filter of the translucent toolbar
|
||||
$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
|
||||
// iOS Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the toolbar title
|
||||
$toolbar-ios-title-font-size: 17px !default;
|
||||
|
||||
/// @prop - Font weight of the toolbar title
|
||||
$toolbar-ios-title-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Text alignment of the toolbar title
|
||||
$toolbar-ios-title-text-align: center !default;
|
||||
|
||||
/// @prop - Text color of the toolbar title
|
||||
$toolbar-ios-title-text-color: $toolbar-ios-text-color !default;
|
||||
|
||||
@ -4,67 +4,25 @@
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-md {
|
||||
:host {
|
||||
@include padding($toolbar-md-padding);
|
||||
|
||||
min-height: $toolbar-md-height;
|
||||
min-height: #{$toolbar-md-height};
|
||||
|
||||
font-family: $toolbar-md-font-family;
|
||||
font-family: #{$toolbar-md-font-family};
|
||||
|
||||
// default color / background
|
||||
--ion-color-base: #{$toolbar-md-background-color};
|
||||
--ion-color-contrast: #{$toolbar-md-text-color};
|
||||
|
||||
--border-color: #{$toolbar-md-border-color};
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Background
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-background-md {
|
||||
border-color: $toolbar-md-border-color;
|
||||
background: $toolbar-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Header / Footer / Tabs Box Shadow
|
||||
// --------------------------------------------------
|
||||
|
||||
.header-md::after,
|
||||
.tabs-md[tabsPlacement="top"] > .tabbar::after,
|
||||
.footer-md::before,
|
||||
.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
|
||||
// using datauri png background image for improved scroll performance
|
||||
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
|
||||
// noticable performance difference on older Android devices
|
||||
@include position(null, null, -5px, 0);
|
||||
@include background-position(start, 0, top, -2px);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==");
|
||||
background-repeat: repeat-x;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
.footer-md::before,
|
||||
.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
|
||||
@include position(-2px, null, auto, null);
|
||||
@include background-position(start, 0, top, 0);
|
||||
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.header-md[no-border]::after,
|
||||
.footer-md[no-border]::before,
|
||||
.tabs-md[tabsPlacement="top"][no-border] > .tabbar::after,
|
||||
.tabs-md[tabsPlacement="bottom"][no-border] > .tabbar::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Material Design Toolbar Content
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-content-md {
|
||||
.toolbar-content {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order-md, content);
|
||||
|
||||
@ -72,262 +30,9 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
::slotted(ion-title) {
|
||||
@include padding(0, 12px);
|
||||
|
||||
@mixin md-toolbar-theme($color-name) {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.toolbar-md-#{$color-name} {
|
||||
|
||||
.toolbar-background-md {
|
||||
background: $color-base;
|
||||
}
|
||||
|
||||
.bar-button-clear-md,
|
||||
.back-button-md .back-button-inner,
|
||||
.bar-button-default-md,
|
||||
.bar-button-outline-md,
|
||||
.toolbar-title-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
.bar-button-clear-md,
|
||||
.back-button-md .back-button-inner,
|
||||
.bar-button-default-md,
|
||||
.bar-button-outline-md {
|
||||
.ripple-effect {
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-outline-md {
|
||||
border-color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include md-bar-button-default($color-name);
|
||||
@include md-bar-button-outline($color-name);
|
||||
@include md-bar-button-solid($color-name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Placement
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-buttons-md {
|
||||
@include margin(0, 2px);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-secondary);
|
||||
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="start"] {
|
||||
order: map-get($toolbar-order-md, buttons-start);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="primary"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-primary);
|
||||
}
|
||||
|
||||
.bar-buttons-md[slot="end"] {
|
||||
@include text-align(end);
|
||||
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Default
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-md {
|
||||
@include padding(0, 5px);
|
||||
@include border-radius($toolbar-md-button-border-radius);
|
||||
|
||||
height: 32px;
|
||||
|
||||
border: 0;
|
||||
font-size: $toolbar-md-button-font-size;
|
||||
font-size: $toolbar-md-title-font-size;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bar-button-solid-md,
|
||||
.bar-button-outline-md {
|
||||
// restrict the ripple to button size
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin md-bar-button-default($color-name, $color-base: null) {
|
||||
@if($color-base == null) {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
}
|
||||
|
||||
.bar-button-#{$color-name}-md,
|
||||
.bar-button-clear-md-#{$color-name},
|
||||
.bar-button-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bar-button-#{$color-name}-md:hover,
|
||||
.bar-button-clear-md-#{$color-name}:hover,
|
||||
.bar-button-md-#{$color-name}:hover {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-md .icon {
|
||||
fill: $toolbar-md-button-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Outline
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-outline-md {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $toolbar-md-button-color;
|
||||
color: $toolbar-md-button-color;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ripple-effect {
|
||||
background-color: $toolbar-md-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-outline-md:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@mixin md-bar-button-outline($color-name) {
|
||||
$color-shade: ion-color($colors-md, $color-name, tint, md);
|
||||
|
||||
.bar-button-outline-md-#{$color-name} {
|
||||
border-color: $color-shade;
|
||||
color: $color-shade;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ripple-effect {
|
||||
background-color: $color-shade;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Solid
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-solid-md {
|
||||
color: $toolbar-md-button-background-color;
|
||||
background-color: $toolbar-md-button-color;
|
||||
|
||||
&.activated {
|
||||
color: $toolbar-md-button-background-color;
|
||||
background-color: $toolbar-md-button-background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button-solid-md:hover {
|
||||
color: $toolbar-md-button-background-color;
|
||||
}
|
||||
|
||||
@mixin md-bar-button-solid($color-name) {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.bar-button-solid-md-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
|
||||
&.activated {
|
||||
color: $color-contrast;
|
||||
background-color: ion-color($colors-md, $color-base, tint, md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-md ion-icon[slot="start"] {
|
||||
@include padding-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-md ion-icon[slot="end"] {
|
||||
@include padding-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-button-md ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
|
||||
font-size: 1.8em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-menutoggle-md {
|
||||
@include padding(0, 2px);
|
||||
|
||||
order: map-get($toolbar-order-md, menu-toggle-start);
|
||||
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.bar-button-menutoggle-md ion-icon {
|
||||
@include padding(0, 6px);
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@include md-bar-button-default(default, $toolbar-md-button-color);
|
||||
@include md-bar-button-default(clear, $toolbar-md-button-color);
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include md-toolbar-theme($color-name);
|
||||
@include md-bar-button-default($color-name);
|
||||
@include md-bar-button-outline($color-name);
|
||||
@include md-bar-button-solid($color-name);
|
||||
}
|
||||
|
||||
|
||||
// MD strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-strong-md {
|
||||
font-weight: $toolbar-md-button-strong-font-weight;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ $toolbar-order-md: (
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
$toolbar-md-font-family: $font-family-md-base !default;
|
||||
$toolbar-md-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Font size of the toolbar button
|
||||
$toolbar-md-button-font-size: 14px !default;
|
||||
@ -38,3 +38,13 @@ $toolbar-md-button-icon-fill-color: currentColor !default;
|
||||
|
||||
/// @prop - Font weight of the strong toolbar button
|
||||
$toolbar-md-button-strong-font-weight: bold !default;
|
||||
|
||||
|
||||
// Material Design Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the toolbar title
|
||||
$toolbar-md-title-font-size: 20px !default;
|
||||
|
||||
/// @prop - Text color of the toolbar title
|
||||
$toolbar-md-title-text-color: $toolbar-md-text-color !default;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-toolbar {
|
||||
:host {
|
||||
@include font-smoothing();
|
||||
|
||||
box-sizing: border-box;
|
||||
@ -19,109 +19,42 @@ ion-toolbar {
|
||||
|
||||
width: 100%;
|
||||
|
||||
color: #{current-color(contrast)};
|
||||
|
||||
contain: content;
|
||||
|
||||
--border-width: 0;
|
||||
--border-style: solid;
|
||||
--background: #{current-color(base)};
|
||||
}
|
||||
|
||||
ion-toolbar ion-title {
|
||||
box-sizing: border-box;
|
||||
// Transparent Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.toolbar-translucent) {
|
||||
--border-color: transparent;
|
||||
|
||||
.toolbar-background {
|
||||
background: var(--translucent-background);
|
||||
|
||||
backdrop-filter: var(--translucent-filter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar-background {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
z-index: $z-index-toolbar-background;
|
||||
|
||||
border: 0;
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
background: var(--background);
|
||||
transform: translateZ(0);
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
ion-buttons {
|
||||
display: block;
|
||||
|
||||
transform: translateZ(0);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ion-buttons button,
|
||||
ion-buttons a,
|
||||
ion-buttons input,
|
||||
ion-buttons textarea,
|
||||
ion-buttons div {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
// Transparent Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar[transparent] .toolbar-background {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
// TODO this is a temp hack to fix segment overlapping ion-nav-item
|
||||
ion-buttons,
|
||||
.bar-button-menutoggle {
|
||||
z-index: $z-index-toolbar-buttons;
|
||||
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
|
||||
// Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button {
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
@include text-align(center);
|
||||
@include appearance(none);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
|
||||
user-select: none;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-button::after {
|
||||
@include position(-7px, -2px, -6px, -2px);
|
||||
|
||||
// used to make the button's hit area larger
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
||||
// Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-button-menutoggle {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Color, Config, Mode } from '../../interface';
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-toolbar',
|
||||
@ -9,9 +8,7 @@ import { createThemedClasses } from '../../utils/theme';
|
||||
ios: 'toolbar.ios.scss',
|
||||
md: 'toolbar.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'toolbar'
|
||||
}
|
||||
shadow: true
|
||||
})
|
||||
export class Toolbar {
|
||||
|
||||
@ -38,22 +35,20 @@ export class Toolbar {
|
||||
@Prop() translucent = false;
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'toolbar-translucent') : {};
|
||||
|
||||
return {
|
||||
class: themedClasses
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
'toolbar-translucent': this.translucent
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
|
||||
const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');
|
||||
|
||||
return [
|
||||
<div class={backgroundCss}></div>,
|
||||
<div class="toolbar-background"></div>,
|
||||
<slot name="start"></slot>,
|
||||
<slot name="secondary"></slot>,
|
||||
<div class={contentCss}>
|
||||
<div class="toolbar-content">
|
||||
<slot></slot>
|
||||
</div>,
|
||||
<slot name="primary"></slot>,
|
||||
|
||||
Reference in New Issue
Block a user