Wie bearbeite ich die 3 Standardlayoutstile von vuetify?
Ich möchte die Standardtypografie von vuetify 3 bearbeiten, die in der variablen .scss-Datei definiert ist, die unten im Paket selbst gezeigt wird.
$typography: map-deep-merge(
(
'h1': (
'size': 6rem,
'weight': 300,
'line-height': 6rem,
'letter-spacing': -.015625em,
'font-family': $heading-font-family,
'text-transform': none
),
'h2': (
'size': 3.75rem,
'weight': 300,
'line-height': 3.75rem,
'letter-spacing': -.0083333333em,
'font-family': $heading-font-family,
'text-transform': none
),
'h3': (
'size': 3rem,
'weight': 400,
'line-height': 3.125rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h4': (
'size': 2.125rem,
'weight': 400,
'line-height': 2.5rem,
'letter-spacing': .0073529412em,
'font-family': $heading-font-family,
'text-transform': none
),
'h5': (
'size': 1.5rem,
'weight': 400,
'line-height': 2rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h6': (
'size': 1.25rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .0125em,
'font-family': $heading-font-family,
'text-transform': none
),
'subtitle-1': (
'size': 1rem,
'weight': normal,
'line-height': 1.75rem,
'letter-spacing': .009375em,
'font-family': $body-font-family,
'text-transform': none
),
'subtitle-2': (
'size': .875rem,
'weight': 500,
'line-height': 1.375rem,
'letter-spacing': .0071428571em,
'font-family': $body-font-family,
'text-transform': none
),
'body-1': (
'size': 1rem,
'weight': 400,
'line-height': 1.5rem,
'letter-spacing': .03125em,
'font-family': $body-font-family,
'text-transform': none
),
'body-2': (
'size': .875rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0178571429em,
'font-family': $body-font-family,
'text-transform': none
),
'button': (
'size': .875rem,
'weight': 500,
'line-height': 2.25rem,
'letter-spacing': .0892857143em,
'font-family': $body-font-family,
'text-transform': uppercase
),
'caption': (
'size': .75rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0333333333em,
'font-family': $body-font-family,
'text-transform': none
),
'overline': (
'size': .75rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .1666666667em,
'font-family': $body-font-family,
'text-transform': uppercase
)
),
$typography
);
$flat-typography: () !default;
@each $type, $values in $typography {
$flat-typography: map-deep-merge(
$flat-typography,
(#{$type}: map.values($values))
);
}
Was ich erreichen möchte, ist, die h1-Größe auf 32 Pixel zu ändern, damit die Standardklasse vuetify text-h1 automatisch den neuen 32 Pixel-Wert übernimmt.
Ich habe versucht, die vuetify-Klasse selbst zu überschreiben, z. B. (text-h1, text-h2 usw.), aber es funktioniert nicht, weil sie alle !important-Attribute
haben