Skip to content

Instantly share code, notes, and snippets.

@paulstelzer

paulstelzer/color.scss

Created September 12, 2018 17:03
Show Gist options
  • Save paulstelzer/c87d05edc7adf120e989d0d83f2089e1 to your computer and use it in GitHub Desktop.
Save paulstelzer/c87d05edc7adf120e989d0d83f2089e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
color.scss
:root {
--ion-color-gold: #ffd700;
--ion-color-gold-rgb: 255, 215, 0;
--ion-color-gold-contrast: #000000;
--ion-color-gold-contrast-rgb: 0, 0, 0;
--ion-color-gold-shade: #e0bd00;
--ion-color-gold-tint: #ffdb1a;
}
.ion-color-gold {
--ion-color-base: var(--ion-color-gold) !important;
--ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
--ion-color-contrast: var(--ion-color-gold-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-gold-shade) !important;
--ion-color-tint: var(--ion-color-gold-tint) !important;
}
@osben
Copy link

osben commented Mar 11, 2019 •
edited
Loading

The fix is when you want to use "linear-gradient" for example:

:root {
    --ion-color-gold: linear-gradient(265deg, #ffd700, #daa520);
    --ion-color-gold-rgb: 255, 215, 0;
    --ion-color-gold-contrast: #000000;
    --ion-color-gold-contrast-rgb: 0, 0, 0;
    --ion-color-gold-shade: #e0bd00;
    --ion-color-gold-tint: #ffdb1a;
}
.ion-color-gold {
    --ion-color-base: var(--ion-color-gold) !important;
    --ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
    --ion-color-contrast: var(--ion-color-gold-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-gold-shade) !important;
    --ion-color-tint: var(--ion-color-gold-tint) !important;
    &[fill="outline"], &[fill="clear"]{
        --ion-color-gold: #ffd700;
        --ion-color-base: #ffd700;
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment