qpp-style 9.31.2 → 9.31.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/browser.js +1 -1
  2. package/dist/index.js +1 -1
  3. package/dist/react/index.js +1 -1
  4. package/package.json +1 -1
  5. package/styles/qppds/components/sidebar/_sidebar-animation.scss +114 -87
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qpp-style",
3
- "version": "9.31.2",
3
+ "version": "9.31.3",
4
4
  "description": "Shared style guide across the QPP program.",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "https://cmsgov.github.io/qpp-style",
package/styles/qppds/components/sidebar/_sidebar-animation.scss CHANGED
@@ -1,125 +1,152 @@
1
- $drawerMaxHeight: 225px;
1
+ $drawerMaxHeight: fit-content;
2
2
  $simpleMaxHeight: 105px;
3
3
  $chartMaxHeight: 306px;
4
4
  $detailsMaxHeight: 130px;
5
5
 
6
6
  @mixin delayKeyframes($name, $maxHeight) {
7
- @keyframes delayRemove#{$name} {
8
- 0% {
9
- max-height: $maxHeight;
10
- }
11
-
12
- 100% {
13
- max-height: 0;
14
- padding-top: 0;
15
- padding-bottom: 0;
16
- }
17
- }
18
-
19
- @keyframes delayAdd#{$name} {
20
- 0% {
21
- max-height: 0;
22
- padding-top: 0;
23
- padding-bottom: 0;
24
- }
25
-
26
- 100% {
27
- max-height: $maxHeight;
28
- }
29
- }
7
+ @keyframes delayRemove#{$name} {
8
+ 0% {
9
+ max-height: $maxHeight;
10
+ }
11
+
12
+ 100% {
13
+ max-height: 0;
14
+ padding-top: 0;
15
+ padding-bottom: 0;
16
+ }
17
+ }
18
+
19
+ @keyframes delayAdd#{$name} {
20
+ 0% {
21
+ max-height: 0;
22
+ padding-top: 0;
23
+ padding-bottom: 0;
24
+ }
25
+
26
+ 100% {
27
+ max-height: $maxHeight;
28
+ }
29
+ }
30
30
  }
31
- @include delayKeyframes('Drawer', $drawerMaxHeight);
31
+
32
+ @mixin delayDrawerKeyframes($maxHeight) {
33
+ @keyframes delayRemoveDrawer {
34
+ 0% {
35
+ height: $maxHeight;
36
+ }
37
+
38
+ 100% {
39
+ height: 0;
40
+ padding-top: 0;
41
+ padding-bottom: 0;
42
+ }
43
+ }
44
+
45
+ @keyframes delayAddDrawer {
46
+ 0% {
47
+ height: 0;
48
+ padding-top: 0;
49
+ padding-bottom: 0;
50
+ }
51
+
52
+ 100% {
53
+ height: $maxHeight;
54
+ }
55
+ }
56
+ }
57
+
58
+ @include delayDrawerKeyframes($drawerMaxHeight);
32
59
  @include delayKeyframes('Simple', $simpleMaxHeight);
33
60
  @include delayKeyframes('Chart', $chartMaxHeight);
34
61
  @include delayKeyframes('Details', $detailsMaxHeight);
35
62
 
36
63
  .animation-group {
37
- transition: opacity 0.5s ease-in-out;
38
- opacity: 0;
39
- overflow: hidden;
64
+ transition: opacity 0.5s ease-in-out;
65
+ opacity: 0;
66
+ overflow: hidden;
40
67
 
41
- &.background-highlight {
42
- background-color: $color-slate-dark;
43
- }
68
+ &.background-highlight {
69
+ background-color: $color-slate-dark;
70
+ }
44
71
  }
45
72
 
46
73
  .animation-group-enter {
47
- opacity: 1;
48
- transition-delay: 0.5s;
49
-
50
- animation-delay: 0s;
51
- animation-duration: 0.6s;
52
- animation-fill-mode: forwards;
53
- animation-name: delayAddSimple;
54
- animation-timing-function: ease-in-out;
74
+ opacity: 1;
75
+ transition-delay: 0.5s;
76
+
77
+ animation-delay: 0s;
78
+ animation-duration: 0.6s;
79
+ animation-fill-mode: forwards;
80
+ animation-name: delayAddSimple;
81
+ animation-timing-function: ease-in-out;
55
82
  }
56
83
 
57
84
  .animation-group-exit {
58
- opacity: 0;
85
+ opacity: 0;
59
86
 
60
- animation-delay: 0.3s;
61
- animation-duration: 0.6s;
62
- animation-fill-mode: forwards;
63
- animation-name: delayRemoveSimple;
64
- animation-timing-function: ease-in-out;
87
+ animation-delay: 0.3s;
88
+ animation-duration: 0.6s;
89
+ animation-fill-mode: forwards;
90
+ animation-name: delayRemoveSimple;
91
+ animation-timing-function: ease-in-out;
65
92
  }
66
93
 
67
94
  // custom max heights
68
95
  .animation-group-details.animation-group-enter {
69
- animation-name: delayAddDetails;
96
+ animation-name: delayAddDetails;
70
97
  }
71
98
 
72
- .animation-group-details.animation-group-exit {
73
- animation-name: delayRemoveDetails;
99
+ .animation-group-details.animation-group-exit {
100
+ animation-name: delayRemoveDetails;
74
101
  }
75
102
 
76
103
  .animation-group-chart.animation-group-enter {
77
- animation-name: delayAddChart;
104
+ animation-name: delayAddChart;
78
105
  }
79
106
 
80
- .animation-group-chart.animation-group-exit {
81
- animation-name: delayRemoveChart;
107
+ .animation-group-chart.animation-group-exit {
108
+ animation-name: delayRemoveChart;
82
109
  }
83
110
 
84
111
  .link-drawer {
85
- .animation-group-enter {
86
- animation-name: delayAddDrawer;
87
- }
112
+ .animation-group-enter {
113
+ animation-name: delayAddDrawer;
114
+ }
88
115
 
89
- .animation-group-exit {
90
- animation-name: delayRemoveDrawer;
91
- }
116
+ .animation-group-exit {
117
+ animation-name: delayRemoveDrawer;
118
+ }
92
119
  }
93
120
 
94
121
  .sidebar {
95
- .animation-flat {
96
- width: 100%;
97
- }
98
-
99
- &.closed {
100
- transition-delay: 0.5s;
101
-
102
- .animation-flat > nav > ul > li {
103
- > a,
104
- > .link-drawer > button {
105
- transition: padding 0.7s ease-out 0.3s;
106
- padding-left: 30px;
107
- }
108
- }
109
- }
110
-
111
- &:not(.closed) {
112
- transition-delay: 0s;
113
-
114
- .animation-flat {
115
- transition-delay: 0s;
116
-
117
- nav > ul > li {
118
- > a,
119
- > .link-drawer > button {
120
- transition: padding 0.7s ease-out 0s;
121
- }
122
- }
123
- }
124
- }
122
+ .animation-flat {
123
+ width: 100%;
124
+ }
125
+
126
+ &.closed {
127
+ transition-delay: 0.5s;
128
+
129
+ .animation-flat > nav > ul > li {
130
+ > a,
131
+ > .link-drawer > button {
132
+ transition: padding 0.7s ease-out 0.3s;
133
+ padding-left: 30px;
134
+ }
135
+ }
136
+ }
137
+
138
+ &:not(.closed) {
139
+ transition-delay: 0s;
140
+
141
+ .animation-flat {
142
+ transition-delay: 0s;
143
+
144
+ nav > ul > li {
145
+ > a,
146
+ > .link-drawer > button {
147
+ transition: padding 0.7s ease-out 0s;
148
+ }
149
+ }
150
+ }
151
+ }
125
152
  }