How to add Linear gradient in variable.scss

Ionic Framework ionic-v3
1

Hi,
I have two questions related to adding a linear gradient:

  1. I wanted to know if i could add a linear gradient color to a variable defined on the Color map in variable.scss.
    I tried to add a linear gradient and it resulted in SASS error mentioning that it must be a color, and suggested to add it in a different format. like this:
    $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), );
    I don’t understand how this can be used for linear gradient.
  2. similarly, when i try to define this on a global variable, i see a different SASS error.
    argument $color of rgba($color, $alpha) must be a color Backtrace: node_modules/ionic-angular/components/picker/picker.ios.scss:155, in function rgba node_modules/ionic-angular/components/picker/picker.ios.scss:155.

Can somebody help me in explaining this behaviour on why this is happening.
Thanks in advance.
Regards
Suresh

2

If you don’t get any better answers, I use Bourbon for this:

.selector {
  @include background-image(linear-gradient(#000000, #ffffff));
}
1 Like
3

Hi @Palaniappan,

Did you find a solution?

I want to use it for an ion-icon. So something like:

<ion-icon name="square" color="my_gradient_color"></ion-icon>

4

i have also same problem to add gradients using color attribute !

5

Do you get any better solution to add gradients

6

Looks like the only way to do that right now is to define a transparent variable, make the ionic element transparent, and apply your gradient on the element.

Something like that: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/

I’m not very satisfied with the solution and find it pretty annoying. Ionic is nice but honestly I’m just ending up not using it because it remove a lots of flexibility we have with plain css.

7

Enjoy

@mixin fluster-linear-gradient($direction, $color-left, $color-right) {
    background: $color-right;
    background: -webkit-linear-gradient($direction, $color-left, $color-right);
    background: -moz-linear-gradient($direction, $color-left, $color-right);
    background: -o-linear-gradient($direction, $color-left, $color-right);
    background: linear-gradient($direction, $color-left, $color-right);
}

@mixin fluster-linear-gradient-variable($direction, $color-left, $color-right) {
    --background: #{$color-right};
    --background: -webkit-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background: -moz-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background: -o-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background: linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
}

@mixin fluster-linear-gradient-variable-activated($direction, $color-left, $color-right) {
    --background-activated: #{$color-right};
    --background-activated: -webkit-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-activated: -moz-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-activated: -o-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-activated: linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
}

@mixin fluster-linear-gradient-variable-checked($direction, $color-left, $color-right) {
    --background-checked: #{$color-right};
    --background-checked: -webkit-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-checked: -moz-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-checked: -o-linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
    --background-checked: linear-gradient(#{$direction}, #{$color-left}, #{$color-right});
}