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

chore(): resolve merge conflicts

Browse Source
This commit is contained in:
Liam DeBeasi
2021-06-21 14:03:47 -04:00
parent 80f181d484 68c0e7136d
commit 5db60d9697
32 changed files with 278 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/button/button.md.scss
View File

@ -129,30 +129,29 @@
// Material Design Button: Hover
// --------------------------------------------------
/**
* Only allow overriding of opacity here
* as developers should not be overriding
* colors when using the color prop.
*/
:host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(contrast)};
opacity: .24;
}
:host(.button-clear.ion-color.ion-focused) .button-native::after,
:host(.button-outline.ion-color.ion-focused) .button-native::after {
background: #{current-color(base)};
opacity: .12;
}
@media (any-hover: hover) {
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(contrast)};
opacity: .08;
}
:host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after {
background: #{current-color(base)};
opacity: .04;
}
}

1
core/src/components/button/test/outline/index.html
View File

@ -90,6 +90,7 @@
<ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
<ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
</p>
<p>
<ion-button fill="outline" disabled>Disabled</ion-button>
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>

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

@ -89,6 +89,31 @@
<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>
</p>
<div class="custom-variables">
<ion-button>Button</ion-button>
<ion-button fill="clear">Button</ion-button>
<ion-button fill="outline">Button</ion-button>
<br>
<ion-button class="ion-focused">Button</ion-button>
<ion-button class="ion-focused" fill="clear">Button</ion-button>
<ion-button class="ion-focused" fill="outline">Button</ion-button>
<br>
<ion-button color="tertiary">Button</ion-button>
<ion-button color="tertiary" fill="clear">Button</ion-button>
<ion-button color="tertiary" fill="outline">Button</ion-button>
<br>
<ion-button color="tertiary" class="ion-focused">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
<ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
</div>
</ion-content>
</ion-app>
@ -110,6 +135,17 @@
.custom {
--color: red;
}
.custom-variables ion-button {
--color: black;
--background: pink;
--background-focused: red;
--background-hover: green;
--background-focused-opacity: .5;
--background-hover-opacity: .5;
}
</style>
</body>
</html>