Zmena <md-progress-linear> výška - css, materiál

Nepodarilo sa prepísať css pre <md-progress-linear>.

Majú nasledujúci kód na nastavenie heightukazovateľa postupu v ich sass file:

$progress-linear-bar-height: 5px !default;

md-progress-linear {
height: $progress-linear-bar-height;
}

Aj keď sa zmením 5pxna 1px stále sa to nezmení. Vynechaním výšky sa nič nezmení.

Aj keď som to dal sám sass súbor, neprepíše:

md-progress-linear {
height: 2px !important;
}

Tu niečo prehliadam?

$progress-linear-bar-height: 1px !default;

md-progress-linear {
display: block;
position: relative;
width: 100%;
height: $progress-linear-bar-height;

padding-top: 0 !important;
margin-bottom: 0 !important;
}

<md-progress-linear md-mode="indeterminate" ng-if="showLoader"></md-progress-linear>

odpovede:

1 pre odpoveď č. 1

Keďže je výška nastavená na viac ako jeden prvok:

md-progress-linear {
height: $progress-linear-bar-height;

.md-container {
height: $progress-linear-bar-height;

.md-bar {
height: $progress-linear-bar-height;
}

.md-dashed:before {
height: $progress-linear-bar-height;
}
}

Môžete ich všetky prepísať alebo to urobiť tak, ako som to urobil:

Súbor variable_material.scss:

$progress-linear-bar-height: 3px;

Súbor main.scss:

@import "variables_material";
@import "vendor/angular-material/angular-material.scss";

@import …

Týmto sa nastaví výška procesora na 3px;

---

0 pre odpoveď č. 2

Môžete použiť scaleY na md-progress-linear element.

transform: scaleY(2); transform-origin: bottom;

---