@@ -100,7 +100,7 @@ span.card-basic {
100100 background-color : rgba (255 , 255 , 255 , 0.0512 );
101101}
102102
103- .expander-top . active {
103+ .expander-top [ aria-expanded = "true" ] {
104104 background-color : rgba (255 , 255 , 255 , 0.0612 );
105105}
106106
@@ -117,18 +117,59 @@ span.card-basic {
117117 background-color : rgba (255 , 255 , 255 , 0.03 );
118118}
119119
120+ .expander-top .important {
121+ position : relative;
122+ }
123+
124+ .expander-top .important ::before {
125+ padding : 0 1em ;
126+ border-radius : 8px 0 0 8px ;
127+ border : 1px solid transparent;
128+ outline : 1px solid rgba (0 , 0 , 0 , 0.1 );
129+ box-shadow : 0 2px 4px 0 rgba (0 , 0 , 0 , 0.13 );
130+
131+ content : "IMPORTANT" ;
132+ position : absolute;
133+ left : -1px ;
134+ top : -1px ;
135+ bottom : -1px ;
136+ background : rgb (68 , 39 , 38 );
137+ color : white;
138+ font-size : 1em ;
139+ font-weight : bold;
140+ display : flex;
141+ align-items : center;
142+ min-width : 70px ;
143+ justify-content : center;
144+ }
145+
146+ .expander-top .important h3 {
147+ margin-left : 110px ;
148+ }
149+
150+ .expander-top .important .clickable : hover {
151+ background-color : rgba (68 , 39 , 38 , 0.4 );
152+ }
153+
120154.expander-bottom {
121155 background-color : rgba (255 , 255 , 255 , 0.0512 );
122- display : none;
123- animation : slide-up 0.4s ;
124- z-index : 0 ;
125- position : relative;
126- overflow-y : hidden;
127156 margin-top : 0 !important ;
157+ max-height : 0 ;
158+ opacity : 0 ;
159+ overflow-y : hidden;
160+ transition : max-height 300ms ease, opacity 300ms ease;
161+ }
162+
163+ .expander-top [aria-expanded = "true" ]~ .expander-bottom {
164+ opacity : 1 ;
165+ }
166+
167+ .expander-top [aria-expanded = "true" ] .chevron {
168+ transform : rotate (180deg ) !important ;
128169}
129170
130- .expander-opened {
131- animation : slide-down 2 s ;
171+ .chevron {
172+ transition : transform 300 ms ease ;
132173}
133174
134175/* Chevron icon */
0 commit comments