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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

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


/* Styles for Rating */

// Styles applied to the root element.
.ZuRating-root {
  display: inline-flex;
  // Required to position the pristine input absolutely
  position: relative;
  font-size: 24px;
  color: #faaf00;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;

  // State class applied to the root element if disabled={true}.
  &.ZuRating-disabled {
    opacity: $zu-palette-action-disabledOpacity;
    pointer-events: none;
  }

  // State class applied to the root element if keyboard focused.
  &.ZuRating-focusVisible {
    // Styles applied to the icon wrapping elements when active.
    & .ZuRating-iconActive {
      outline: 1px solid #999;
    }
  }

  // Visually hide an element.
  & .ZuRating-visuallyHidden {
    @include zu-visually-hidden;
  }

  // Styles applied to the root element if size="small".
  &.ZuRating-sizeSmall {
    font-size: 18px;
  }

  // Styles applied to the root element if size="medium".
  &.ZuRating-sizeMedium {

  }

  // Styles applied to the root element if size="large".
  &.ZuRating-sizeLarge {
    font-size: 30px;
  }

  // Styles applied to the root element if readOnly={true}.
  &.ZuRating-readOnly {
    pointer-events: none;
  }
}

// Styles applied to the label elements.
.ZuRating-label {
  cursor: inherit;

  &.ZuRating-labelEmptyValueFocused {
    top: 0;
    bottom: 0;
    position: absolute;
    outline: 1px solid #999;
    width: 100%;
  }

  // Styles applied to the label of the "no value" input when it is active.
  &.ZuRating-labelEmptyValueActive {

  }
}

// Styles applied to the icon wrapping elements.
.ZuRating-icon {
  // Fit wrapper to actual icon size.
  display: flex;
  transition: transform $zu-duration-shortest $zu-easing-easeInOut 0ms;
  pointer-events: none;

  // Styles applied to the icon wrapping elements when empty.
  &.ZuRating-iconEmpty {
    color: $zu-palette-action-disabled;
  }

  // Styles applied to the icon wrapping elements when filled.
  &.ZuRating-iconFilled {

  }

  // Styles applied to the icon wrapping elements when hover.
  &.ZuRating-iconHover {

  }

  &.ZuRating-iconActive {
    transform: scale(1.2);
  }

  // Styles applied to the icon wrapping elements when focus.
  &.ZuRating-iconFocus {
  }
}

// Styles applied to the icon wrapping elements when decimals are necessary.
.ZuRating-decimal {
  position: relative;

  &.ZuRating-iconActive {
    transform: scale(1.2);
  }
}