beapi-frontend-framework/src/scss/03-base/_variables-css.scss at 7fc7e77da30e6951a4354e9dc0bb64c1bc978f3b · BeAPI/beapi-frontend-framework · GitHub

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
76
77
78
79
80
81
82
83
84
85
86
@use "../01-abstract/variables" as *;
@use "../02-tools/f-fluid-size" as *;
@use "../02-tools/m-breakpoint" as *;
@use "../02-tools/m-reduced-motion" as *;

:root {
	/*
	* Breakpoints
	*/
	--breakpoint-mobile-to-desktop-nav: #{map-get($breakpoints, mobile-to-desktop-nav)}; // Used by JavaScript

	/*
     * Heading
     */
	// Font size
	--heading--font-size-h1: #{fluid-size(45px, 56px)};
	--heading--font-size-h2: #{fluid-size(32px, 48px)};
	--heading--font-size-h3: #{fluid-size(24px, 36px)};
	--heading--font-size-h4: #{fluid-size(20px, 32px)};
	--heading--font-size-h5: #{fluid-size(18px, 24px)};
	--heading--font-size-h6: #{fluid-size(16px, 18px)};

	// Line height
	--heading--line-height-h1: 1.25;
	--heading--line-height-h2: 1.25;
	--heading--line-height-h3: 1.25;
	--heading--line-height-h4: 1.25;
	--heading--line-height-h5: 1.25;
	--heading--line-height-h6: 1.25;

	/*
     * paragraph
    */
	// Font size
	--paragraph--font-size-huge: #{fluid-size(28px, 32px)};
	--paragraph--font-size-large: #{fluid-size(20px, 24px)};
	--paragraph--font-size-small: #{fluid-size(12px, 14px)};
	--paragraph--font-size-default: #{fluid-size(14px, 16px)};

	// line height
	--paragraph--line-height-huge: 1.4;
	--paragraph--line-height-large: 1.4;
	--paragraph--line-height-small: 1.4;
	--paragraph--line-height-default: 1.4;

	/*
     * Animation speeds
     */
	--speed: 1s;

	/*
     * Admin bar
     */
	--wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem);

	/*
     * A11y reduced motion
     */
	@include reduced-motion {
		--speed: 0s;
	}

	/*
     * Global breakpoints
     */

	@include breakpoints(s, max) {
		/*
         * Admin bar become not sticky
         */
		&:not(.scroll-top) {
			.admin-bar {
				--wp-admin-bar-height: 0rem;
			}
		}
	}
}

body {
	/*
     * Gutters : In the body because WordPress generate this variable in the body and not in the root
     */
	--responsive--gutter-left: var(--wp--style--root--padding-left);
	--responsive--gutter-right: var(--wp--style--root--padding-right);
	--responsive--gutter: calc(var(--responsive--gutter-left) + var(--responsive--gutter-right));
}