1/* Toggles */ 2 3.drawer { 4 position: relative; 5 width: 100%; 6 max-height: 0; 7 background: $drawer-background-color; 8 @include box-shadow( 9 inset $drawer-inner-shadow-x-offset #{-$drawer-inner-shadow-y-offset} $drawer-inner-shadow-blur $drawer-inner-shadow-color, 10 inset $drawer-inner-shadow-x-offset $drawer-inner-shadow-y-offset $drawer-inner-shadow-blur $drawer-inner-shadow-color); 11 ; 12 overflow: hidden; 13 @include transition-duration(.3s); 14 &.active { 15 height: auto; 16 max-height: 800px; 17 @include transition-duration(.5s); 18 } 19} 20 21.modal { 22 width: 100%; 23 height: 100%; 24 position: fixed; 25 top: 0; 26 left: 0; 27 z-index: 999999; 28 background: rgb(0, 0, 0); 29 background: $modal-overlay-color; 30 > .content { 31 width: 50%; 32 min-height: 50%; 33 max-height: 65%; 34 position: relative; 35 top: 25%; 36 margin: 0 auto; 37 padding: $gutter-in-px; 38 background: $modal-window-color; 39 z-index: 2; 40 overflow: auto; 41 @include respond(portrait-tablets) { 42 width: 80%; 43 min-height: 80%; 44 max-height: 80%; 45 top: 10%; 46 } 47 @include respond(all-phones) { 48 width: 92.5%; 49 min-height: 92.5%; 50 max-height: 92.5%; 51 top: 3.75%; 52 } 53 > .close { 54 position: absolute; 55 top: 10px; 56 right: 10px; 57 cursor: pointer; 58 z-index: 3; 59 } 60 } 61 &, > .content { 62 visibility: hidden; 63 @include opacity(0); 64 } 65 &.active { 66 @include transition-property(opacity); 67 @include transition-duration(.3s); 68 &, > .content { 69 visibility: visible; 70 @include opacity(1); 71 } 72 } 73} 74