source: trip-planner-front/node_modules/primeng/resources/components/speeddial/speeddial.css

Last change on this file was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 2.1 KB
RevLine 
[59329aa]1.p-speeddial {
2 position: absolute;
3 display: flex;
4 z-index: 1;
5}
6
7.p-speeddial-list {
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 display: flex;
12 align-items: center;
13 justify-content: center;
14 transition: top 0s linear 0.2s;
15 pointer-events: none;
16}
17
18.p-speeddial-item {
19 transform: scale(0);
20 opacity: 0;
21 transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
22 will-change: transform;
23}
24
25.p-speeddial-action {
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 border-radius: 50%;
30 position: relative;
31 overflow: hidden;
32 cursor: pointer;
33}
34
35.p-speeddial-circle .p-speeddial-item,
36.p-speeddial-semi-circle .p-speeddial-item,
37.p-speeddial-quarter-circle .p-speeddial-item {
38 position: absolute;
39}
40
41.p-speeddial-rotate {
42 transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
43 will-change: transform;
44}
45
46.p-speeddial-mask {
47 position: absolute;
48 left: 0;
49 top: 0;
50 width: 100%;
51 height: 100%;
52 opacity: 0;
53 transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
54}
55
56.p-speeddial-mask-visible {
57 pointer-events: none;
58 opacity: 1;
59 transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
60}
61
62.p-speeddial-opened .p-speeddial-list {
63 pointer-events: auto;
64}
65
66.p-speeddial-opened .p-speeddial-item {
67 transform: scale(1);
68 opacity: 1;
69}
70
71.p-speeddial-opened .p-speeddial-rotate {
72 transform: rotate(45deg);
73}
74
75/* Direction */
76.p-speeddial-direction-up {
77 align-items: center;
78 flex-direction: column-reverse;
79}
80
81.p-speeddial-direction-up .p-speeddial-list {
82 flex-direction: column-reverse;
83}
84
85.p-speeddial-direction-down {
86 align-items: center;
87 flex-direction: column;
88}
89
90.p-speeddial-direction-down .p-speeddial-list {
91 flex-direction: column;
92}
93
94.p-speeddial-direction-left {
95 justify-content: center;
96 flex-direction: row-reverse;
97}
98
99.p-speeddial-direction-left .p-speeddial-list {
100 flex-direction: row-reverse;
101}
102
103.p-speeddial-direction-right {
104 justify-content: center;
105 flex-direction: row;
106}
107
108.p-speeddial-direction-right .p-speeddial-list {
109 flex-direction: row;
110}
Note: See TracBrowser for help on using the repository browser.