F. css / md-fab-primary.css

1
.md-fab-primary {
2
 position: relative;
3
 display: inline-flex;
4
 justify-content: center;
5
 align-items: center;
6
 border: none;
7
 width: 3.5rem;
8
 height: 3.5rem;
9
 border-radius: var(--md-sys-shape-corner-large-default-size);
10
 overflow: hidden;
11
 padding: 0;
12
 padding-block: 0;
13
 padding-inline: 0;
14
 text-decoration: none;
15
 background-color: var(--md-sys-color-primary-container);
16
 box-shadow: var(--md-box_shadow_level3);
17
}
18

  
19
.md-fab-primary[hidden] {

  
20
 display: none;

  
21
}

  
22

  
23
/* state layer */

  
24
.md-fab-primary::after {

  
25
 content: "";

  
26
 position: absolute;

  
27
 top: 0;

  
28
 right: 0;

  
29
 left: 0;

  
30
 bottom: 0;

  
31
}

  
32

  
33
.md-fab-primary span {

  
34
 position: relative;

  
35
 color: var(--md-sys-color-on-primary-container);

  
36
}

  
37

  
38
.md-fab-primary:hover {

  
39
 box-shadow: var(--md-box_shadow_level4);

  
40
}

  
41

  
42
.md-fab-primary:hover::after {

  
43
 background-color: var(--md-sys-color-on-primary-container);

  
44
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
45
}

  
46

  
47
.md-fab-primary:hover span {

  
48
 color: var(--md-sys-color-on-primary-container);

  
49
}

  
50

  
51

  
52
.md-fab-primary:focus {

  
53
 box-shadow: var(--md-box_shadow_level3);

  
54
 outline:none;

  
55
 /* outline:

  
56
  var(--md-sys-color-secondary) var(--md-sys-state-focus-indicator-thickness);

  
57
 outline-offset: var(--md-sys-state-focus-indicator-outer-offset); */

  
58
}

  
59

  
60
.md-fab-primary:focus::after {

  
61
 background-color: var(--md-sys-color-on-primary-container);

  
62
 opacity: var(--md-sys-state-focus-state-layer-opacity);

  
63
}

  
64

  
65
.md-fab-primary:focus span {

  
66
 color: var(--md-sys-color-on-primary-container);

  
67
}

  
68

  
69
.md-fab-primary:active {

  
70
 box-shadow: var(--md-box_shadow_level3);

  
71
 background-position: center;

  
72
 background-image:

  
73
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);

  
74
 background-size: 100%;

  
75
 animation-name: md-ripple;

  
76
 animation-duration: var(--md-sys-motion-duration-500);

  
77
}

  
78

  
79
.md-fab-primary:active::after {

  
80
 background-color: var(--md-sys-color-on-primary-container);

  
81
 opacity: var(--md-sys-state-pressed-state-layer-opacity);

  
82
}

  
83

  
84
.md-fab-primary:active span {

  
85
 color: var(--md-sys-color-on-primary-container);

  
86
}

 


 
 
 
     skip_previous
    
 
     skip_next