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

// 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.

/* Transition easing curves */

// This is the most common easing curve.
$zu-easing-easeInOut: cubic-bezier(0.4, 0, 0.2, 1) !default;

// Objects enter the screen at full velocity from off-screen and
// slowly decelerate to a resting point.
$zu-easing-easeOut: cubic-bezier(0.0, 0, 0.2, 1) !default;

// Objects leave the screen at full velocity. They do not decelerate when off-screen.
$zu-easing-easeIn: cubic-bezier(0.4, 0, 1, 1) !default;

// The sharp curve is used by objects that may return to the screen at any time.
$zu-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1) !default;

:root {
  --zu-easing-easeInOut: #{$zu-easing-easeInOut};
  --zu-easing-easeOut: #{$zu-easing-easeOut};
  --zu-easing-easeIn: #{$zu-easing-easeIn};
  --zu-easing-sharp: #{$zu-easing-sharp};
}

// Transition duration variables
$zu-duration-shortest: 150ms !default;
$zu-duration-shorter: 200ms !default;
$zu-duration-short: 250ms !default;
// most basic recommended timing
$zu-duration-standard: 300ms !default;
// this is to be used in complex animations
$zu-duration-complex: 375ms !default;
// recommended when something is entering screen
$zu-duration-enteringScreen: 225ms !default;
// recommended when something is leaving screen
$zu-duration-leavingScreen: 195ms !default;

:root {
  --zu-duration-shortest: #{$zu-duration-shortest};
  --zu-duration-shorter: #{$zu-duration-shorter};
  --zu-duration-short: #{$zu-duration-short};
  --zu-duration-standard: #{$zu-duration-standard};
  --zu-duration-complex: #{$zu-duration-complex};
  --zu-duration-enteringScreen: #{$zu-duration-enteringScreen};
  --zu-duration-leavingScreen: #{$zu-duration-leavingScreen};
}