mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +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
115
core/src/components/buttons/buttons.ios.scss
Normal file
115
core/src/components/buttons/buttons.ios.scss
Normal file
@ -0,0 +1,115 @@
|
||||
@import "./buttons.ios.vars";
|
||||
@import "./buttons";
|
||||
|
||||
|
||||
// iOS Toolbar Button Default
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(*) ion-button {
|
||||
font-size: #{$toolbar-ios-button-font-size};
|
||||
font-weight: 400;
|
||||
|
||||
--padding-top: 0;
|
||||
--pading-bottom: 0;
|
||||
--padding-start: 5px;
|
||||
--padding-end: 5px;
|
||||
|
||||
--border-radius: #{$toolbar-ios-button-border-radius};
|
||||
|
||||
--height: 32px;
|
||||
}
|
||||
|
||||
:host-context(.ion-color)::slotted(*) .button {
|
||||
--ion-color-base: currentColor;
|
||||
}
|
||||
|
||||
// iOS Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
::slotted(*) ion-icon[slot="start"] {
|
||||
@include margin(0);
|
||||
@include margin-horizontal(null, .3em);
|
||||
|
||||
font-size: 24px;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-icon[slot="end"] {
|
||||
@include margin(0);
|
||||
@include margin-horizontal(.4em, null);
|
||||
|
||||
font-size: 24px;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
@include margin(0);
|
||||
|
||||
font-size: 31px;
|
||||
line-height: .67;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-button.button-clear {
|
||||
--height: 35px;
|
||||
}
|
||||
|
||||
// iOS Toolbar Button Solid
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(*) ion-button.button-solid-ios:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
// iOS Toolbar Menu Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
// .button-menutoggle-ios {
|
||||
// order: map-get($toolbar-order-ios, menu-toggle-start);
|
||||
|
||||
// min-width: 36px;
|
||||
|
||||
// --margin-top: 0;
|
||||
// --margin-bottom: 0;
|
||||
// --margin-start: 6px;
|
||||
// --margin-end: 6px;
|
||||
|
||||
// --padding-top: 0;
|
||||
// --padding-bottom: 0;
|
||||
// --padding-start: 0;
|
||||
// --padding-end: 0;
|
||||
|
||||
// ion-icon {
|
||||
// @include padding(0, 6px);
|
||||
|
||||
// font-size: 28px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// iOS Toolbar Button Placement
|
||||
// --------------------------------------------------
|
||||
|
||||
:host([slot="start"]) {
|
||||
order: map-get($toolbar-order-ios, buttons-start);
|
||||
}
|
||||
|
||||
:host([slot="secondary"]) {
|
||||
order: map-get($toolbar-order-ios, buttons-secondary);
|
||||
}
|
||||
|
||||
:host([slot="primary"]) {
|
||||
order: map-get($toolbar-order-ios, buttons-primary);
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
:host([slot="end"]) {
|
||||
order: map-get($toolbar-order-ios, buttons-end);
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
43
core/src/components/buttons/buttons.ios.vars.scss
Normal file
43
core/src/components/buttons/buttons.ios.vars.scss
Normal file
@ -0,0 +1,43 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Order of the toolbar elements
|
||||
$toolbar-order-ios: (
|
||||
back-button: 0,
|
||||
menu-toggle-start: 1,
|
||||
buttons-start: 2,
|
||||
buttons-secondary: 3,
|
||||
content: 4,
|
||||
buttons-primary: 5,
|
||||
buttons-end: 6,
|
||||
menu-toggle-end: 7,
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
$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(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the toolbar button
|
||||
$toolbar-ios-button-background-color: $toolbar-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color of the toolbar button when activated
|
||||
$toolbar-ios-button-background-color-activated: $toolbar-ios-color-active !default;
|
||||
|
||||
/// @prop - Border radius of the toolbar button
|
||||
$toolbar-ios-button-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font weight of the strong toolbar button
|
||||
$toolbar-ios-button-strong-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Fill color of the toolbar button icon
|
||||
$toolbar-ios-button-icon-fill-color: currentColor !default;
|
||||
|
||||
/// @prop - Filter of the translucent toolbar
|
||||
$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
89
core/src/components/buttons/buttons.md.scss
Normal file
89
core/src/components/buttons/buttons.md.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@import "./buttons.md.vars";
|
||||
@import "./buttons";
|
||||
|
||||
// Material Design Toolbar Button Default
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
@include margin(0, 2px);
|
||||
}
|
||||
|
||||
::slotted(*) ion-button {
|
||||
font-size: #{$toolbar-md-button-font-size};
|
||||
font-weight: 500;
|
||||
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
|
||||
--border-radius: #{$toolbar-md-button-border-radius};
|
||||
--height: 32px;
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Icon
|
||||
// --------------------------------------------------
|
||||
::slotted(*) ion-icon[slot="start"] {
|
||||
@include margin(0);
|
||||
@include margin-horizontal(null, .3em);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-icon[slot="end"] {
|
||||
@include margin(0);
|
||||
@include margin-horizontal(.4em, null);
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
@include margin(0);
|
||||
|
||||
font-size: 1.8em;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(*) ion-button.button-solid,
|
||||
::slotted(*) ion-button.button-outline {
|
||||
--ion-color-base: #{$toolbar-md-text-color};
|
||||
--ion-color-contrast: #{$toolbar-md-background-color};
|
||||
--ion-color-shade: #{$toolbar-md-text-color};
|
||||
}
|
||||
|
||||
::slotted(*) ion-button.button-clear {
|
||||
--ion-color-base: currentColor;
|
||||
--height: 45px;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toolbar Button Placement
|
||||
// --------------------------------------------------
|
||||
|
||||
:host([slot="start"]) {
|
||||
order: map-get($toolbar-order-md, buttons-start);
|
||||
}
|
||||
|
||||
:host([slot="secondary"]) {
|
||||
order: map-get($toolbar-order-md, buttons-secondary);
|
||||
}
|
||||
|
||||
:host([slot="primary"]) {
|
||||
order: map-get($toolbar-order-md, buttons-primary);
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
:host([slot="end"]) {
|
||||
order: map-get($toolbar-order-md, buttons-end);
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
40
core/src/components/buttons/buttons.md.vars.scss
Normal file
40
core/src/components/buttons/buttons.md.vars.scss
Normal file
@ -0,0 +1,40 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Order of the toolbar elements
|
||||
$toolbar-order-md: (
|
||||
back-button: 0,
|
||||
menu-toggle-start: 1,
|
||||
buttons-start: 2,
|
||||
content: 3,
|
||||
buttons-secondary: 4,
|
||||
buttons-primary: 5,
|
||||
buttons-end: 6,
|
||||
menu-toggle-end: 7,
|
||||
);
|
||||
|
||||
/// @prop - Font family of the toolbar
|
||||
$toolbar-md-font-family: $font-family-base !default;
|
||||
|
||||
/// @prop - Font size of the toolbar button
|
||||
$toolbar-md-button-font-size: 14px !default;
|
||||
|
||||
/// @prop - Text color of the toolbar button
|
||||
$toolbar-md-button-color: $toolbar-md-text-color !default;
|
||||
|
||||
/// @prop - Background color of the toolbar button
|
||||
$toolbar-md-button-background-color: $toolbar-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of the toolbar button when activated
|
||||
$toolbar-md-button-background-color-activated: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Border radius of the toolbar button
|
||||
$toolbar-md-button-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Fill color of the toolbar button icon
|
||||
$toolbar-md-button-icon-fill-color: currentColor !default;
|
||||
|
||||
/// @prop - Font weight of the strong toolbar button
|
||||
$toolbar-md-button-strong-font-weight: bold !default;
|
||||
31
core/src/components/buttons/buttons.scss
Normal file
31
core/src/components/buttons/buttons.scss
Normal file
@ -0,0 +1,31 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
:host {
|
||||
z-index: $z-index-toolbar-buttons;
|
||||
|
||||
display: block;
|
||||
|
||||
transform: translateZ(0);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(*) ion-button {
|
||||
--margin-top: 0;
|
||||
--margin-bottom: 0;
|
||||
--margin-start: 0;
|
||||
--margin-end: 0;
|
||||
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
|
||||
--box-shadow: none;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Component } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-buttons',
|
||||
host: {
|
||||
theme: 'bar-buttons'
|
||||
}
|
||||
styleUrls: {
|
||||
ios: 'buttons.ios.scss',
|
||||
md: 'buttons.md.scss'
|
||||
},
|
||||
scoped: true,
|
||||
})
|
||||
export class Buttons {}
|
||||
|
||||
@ -1,31 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Buttons - 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>
|
||||
<ion-toolbar>
|
||||
<ion-title>Buttons - Basic</ion-title>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>start btn</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button slot="icon-only">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding no-bounce text-center>
|
||||
Content
|
||||
</ion-content>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Buttons - Basic</ion-title>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>start btn</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button slot="icon-only">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding no-bounce text-center>
|
||||
Content
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user