javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): allow overflow to be overridden by the CSS variable (#20738)

Browse Source 
fixes #20726
This commit is contained in:
Brandy Carney
2020-03-11 11:35:26 -04:00
committed by GitHub
parent 87a27216d0
commit 7ecde36f9d
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/button/button.scss
View File

@ -179,13 +179,13 @@
line-height: 1; line-height: 1;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
contain: layout style; contain: layout style;
cursor: pointer; cursor: pointer;
opacity: var(--opacity); opacity: var(--opacity);
overflow: var(--overflow); overflow: var(--overflow);
overflow: hidden;
z-index: 0; z-index: 0;
box-sizing: border-box; box-sizing: border-box;
appearance: none; appearance: none;

12
core/src/components/button/test/states/index.html
View File

@ -23,7 +23,7 @@
<ion-button fill="clear">Clear</ion-button> <ion-button fill="clear">Clear</ion-button>
<ion-button color="secondary">Default</ion-button> <ion-button color="secondary">Default</ion-button>
<ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button color="danger" shape="round">Round</ion-button> <ion-button color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button color="warning" fill="outline">Outline</ion-button> <ion-button color="warning" fill="outline">Outline</ion-button>
<ion-button color="dark" fill="clear">Clear</ion-button> <ion-button color="dark" fill="clear">Clear</ion-button>
</p> </p>
@ -37,7 +37,7 @@
<ion-button class="ion-focused" fill="clear">Clear</ion-button> <ion-button class="ion-focused" fill="clear">Clear</ion-button>
<ion-button class="ion-focused" color="secondary">Default</ion-button> <ion-button class="ion-focused" color="secondary">Default</ion-button>
<ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-focused" color="danger" shape="round">Round</ion-button> <ion-button class="ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button> <ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
<ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button> <ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
</p> </p>
@ -51,7 +51,7 @@
<ion-button class="ion-activated" fill="clear">Clear</ion-button> <ion-button class="ion-activated" fill="clear">Clear</ion-button>
<ion-button class="ion-activated" color="secondary">Default</ion-button> <ion-button class="ion-activated" color="secondary">Default</ion-button>
<ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="ion-activated" color="danger" shape="round">Round</ion-button> <ion-button class="ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button> <ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
<ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button> <ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
</p> </p>
@ -65,7 +65,7 @@
<ion-button class="custom" fill="clear">Clear</ion-button> <ion-button class="custom" fill="clear">Clear</ion-button>
<ion-button class="custom" color="secondary">Default</ion-button> <ion-button class="custom" color="secondary">Default</ion-button>
<ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom" color="danger" shape="round">Round</ion-button> <ion-button class="custom" color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button class="custom" color="warning" fill="outline">Outline</ion-button> <ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom" color="dark" fill="clear">Clear</ion-button> <ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
<ion-button class="custom ion-focused">Default</ion-button> <ion-button class="custom ion-focused">Default</ion-button>
@ -75,7 +75,7 @@
<ion-button class="custom ion-focused" fill="clear">Clear</ion-button> <ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
<ion-button class="custom ion-focused" color="secondary">Default</ion-button> <ion-button class="custom ion-focused" color="secondary">Default</ion-button>
<ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button> <ion-button class="custom ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button> <ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button> <ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
<ion-button class="custom ion-activated">Default</ion-button> <ion-button class="custom ion-activated">Default</ion-button>
@ -85,7 +85,7 @@
<ion-button class="custom ion-activated" fill="clear">Clear</ion-button> <ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
<ion-button class="custom ion-activated" color="secondary">Default</ion-button> <ion-button class="custom ion-activated" color="secondary">Default</ion-button>
<ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button> <ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button> <ion-button class="custom ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
<ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button> <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
<ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button> <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
</p> </p>