zu 0.3.3

Yew web components, implementing Material Design
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.


/* Font related variables */

$zu-font-size-s100: 10px !default;
$zu-font-size-s200: 12px !default;
$zu-font-size-s300: 14px !default;
$zu-font-size-s400: 16px !default;
$zu-font-size-s500: 20px !default;
$zu-font-size-s600: 24px !default;
$zu-font-size-s700: 28px !default;
$zu-font-size-s800: 32px !default;
$zu-font-size-s900: 40px !default;
$zu-font-size-s1000: 68px !default;

:root {
  --zu-font-size-s100: #{$zu-font-size-s100};
  --zu-font-size-s200: #{$zu-font-size-s200};
  --zu-font-size-s300: #{$zu-font-size-s300};
  --zu-font-size-s400: #{$zu-font-size-s400};
  --zu-font-size-s500: #{$zu-font-size-s500};
  --zu-font-size-s600: #{$zu-font-size-s600};
  --zu-font-size-s700: #{$zu-font-size-s700};
  --zu-font-size-s800: #{$zu-font-size-s800};
  --zu-font-size-s900: #{$zu-font-size-s900};
}

$zu-line-height-h100: 14px;
$zu-line-height-h200: 16px;
$zu-line-height-h300: 20px;
$zu-line-height-h400: 22px;
$zu-line-height-h500: 28px;
$zu-line-height-h600: 32px;
$zu-line-height-h700: 36px;
$zu-line-height-h800: 40px;
$zu-line-height-h900: 52px;
$zu-line-height-h1000: 92px;

:root {
	--zu-line-height-h100: #{$zu-line-height-h100};
	--zu-line-height-h200: #{$zu-line-height-h200};
	--zu-line-height-h300: #{$zu-line-height-h300};
	--zu-line-height-h400: #{$zu-line-height-h400};
	--zu-line-height-h500: #{$zu-line-height-h500};
	--zu-line-height-h600: #{$zu-line-height-h600};
	--zu-line-height-h700: #{$zu-line-height-h700};
	--zu-line-height-h800: #{$zu-line-height-h800};
	--zu-line-height-h900: #{$zu-line-height-h900};
	--zu-line-height-h1000: #{$zu-line-height-h1000};
}

$zu-font-weight-regular: 400;
$zu-font-weight-medium: 500;
$zu-font-weight-semiBold: 600;
$zu-font-weight-bold: 700;

:root {
	--zu-font-weight-regular: #{$zu-font-weight-regular};
	--zu-font-weight-medium: #{$zu-font-weight-medium};
	--zu-font-weight-semiBold: #{$zu-font-weight-semiBold};
	--zu-font-weight-bold: #{$zu-font-weight-bold};
}

$zu-font-family-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
$zu-font-family-monospace: Consolas, 'Courier New', Courier, monospace;
$zu-font-family-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;

:root {
	--zu-font-family-base: #{$zu-font-family-base};
	--zu-font-family-monospace: #{$zu-font-family-monospace};
	--zu-font-family-numeric: #{$zu-font-family-numeric};
}