CODEWITHSUNDEEP
cssangular
Nesan Mano
Nesan Mano

Reputation: 2166

Angular 12 CSS not right

I have the following css in my angular Component

.folders {
  border-left: 5px solid #b8744f;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px #fff;

  /*START*/
  background: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#327aa4),
    color-stop(45%, #2e4b5a),
    to(#5cb0dc)
  );
  /*END*/

  background: -moz-linear-gradient(
    top,
    rgba(50, 123, 165, 0.75),
    rgba(46, 75, 90, 0.75) 50%,
    rgba(92, 176, 220, 0.75)
  );
  border: solid 1px #102a3e;
  box-shadow: inset 0 0 1px #fff;
  display: inline-block;
  overflow: visible;
}

The part marked between the comments START and END are not right as per the IDE. It keeps complaining like the following:

Mismatched parameters ([linear | radial] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)

-webkit-gradient is not working in angular 12 It keeps pointing to a parameter

This image shows the error in Webstrom

Upvotes: 0

Views: 166

Answers (1)

Domske
Domske

Reputation: 5656

Use linear-gradient:

html, body {
  width: 100%; 
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(
    #327aa4,
    #2e4b5a 45%,
    #5cb0dc
  );
}

CSS vendor / browser prefixes like -webkit or -moz are not necessary and makes the code messier and you repeat yourself (DRY). I recommend to use Angular with SCSS. Angular supports it out of the box.

If you want to rotate the gradient (e.g. horizontal) you can add the value 90deg. See the docs and web.

Upvotes: 1

Related Questions